无法让我的鼠标悬停在标记上工作答案

【问题标题】：trouble getting my mouseover on markers to work无法让我的鼠标悬停在标记上工作
【发布时间】：2016-06-01 14:25:02
【问题描述】：

我在下面创建了带有鼠标悬停效果的代码，但它不起作用。我把它放错地方了吗？我似乎无法让它工作。最终，我想在它们上显示某种类型的信息，但每次都是一步一步，试图让基本的工作先行。

<!DOCTYPE html>
<html>

<head>



<!-- Google Maps and Places API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">    

  //declare namespace
  var up206b = {};

  //declare map
  var map;

  function trace(message) 
  {
    if (typeof console != 'undefined') 
    {
      console.log(message);
    }
  }

  up206b.initialize = function()
  {
    var latlng = new google.maps.LatLng(52.136436, -0.460739);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  var geocoder = new google.maps.Geocoder();

  up206b.geocode = function() 
  {

    var addresses = [ $('#address').val(), $('#address2').val()];

    addresses.forEach(function(address){
      if(address){
      geocoder.geocode( { 'address': address}, function(results, status) 
                       {
        if (status == google.maps.GeocoderStatus.OK) 
        {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
          });
        } 
        else 
        {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
      }
    });
  }

var infowindow = new google.maps.InfoWindow({
content: contentString
});

var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
          });


marker.addListener('mouseover', function() {
infowindow.open(map, this);
});


marker.addListener('mouseout', function() {
infowindow.close();
});

</script> 
</head>
 <body onload="up206b.initialize()"> 

 <div style="top: 0; right: 0; width:380px; height: 500px; float:right;padding-left:10px; padding-right:10px;"> 
  <h1 align="center">Map Search</h1>   

  <div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" >

   <form >
    <br>
    Location 1 <input type="text" id="address">
    <br>
    <br>
    Location 2 
    <input type="text" id="address2">
    <br>
    <br>
    <input type="button" value="Submit" onClick="up206b.geocode()">
  </form>
  </div>

</div> 

<div id="map_canvas" style="height: 500px; width: 500px; float:right"></div>

【问题讨论】：

请提供一个Minimal, Complete, Tested and Readable example 来证明该问题。我得到一个带有已发布代码的 javascript：Uncaught ReferenceError: contentString is not defined
我已经添加了我的其余工作，这将为您提供一个工作脚本，只是没有任何我想要的鼠标悬停
在定义contentString之前不会有任何鼠标悬停，即信息窗口中显示的内容，如果为空/null，则没有信息窗口...

标签： javascript html google-maps google-maps-api-3 google-api

【解决方案1】：

你需要：

定义contentString
将标记与信息窗口内容相关联。一种方法是使用匿名函数闭包，就像这个相关问题 Google Maps JS API v3 - Simple Multiple Marker Example 一样，或者使用显式 createMarker 函数，如下面的示例。

注意：此方法仅适用于大约 10 个地址，之后它将遇到地理编码器速率限制。

function createMarker(latlng, html, map) {
  var infowindow = new google.maps.InfoWindow({
    content: html
  });
  var marker = new google.maps.Marker({
    map: map,
    position: latlng
  });
  marker.addListener('mouseover', function() {
    infowindow.open(map, this);
  });
  marker.addListener('mouseout', function() {
    infowindow.close();
  });
}

proof of concept fiddle

代码 sn-p：

var markers = [];

function createMarker(latlng, html, map) {
  var infowindow = new google.maps.InfoWindow({
    content: html
  });
  var marker = new google.maps.Marker({
    map: map,
    position: latlng
  });
  marker.addListener('mouseover', function() {
    infowindow.open(map, this);
  });
  marker.addListener('mouseout', function() {
    infowindow.close();
  });
  markers.push(marker);
}

//declare namespace
var up206b = {};

//declare map
var map;

function trace(message) {
  if (typeof console != 'undefined') {
    console.log(message);
  }
}

up206b.initialize = function() {
  var latlng = new google.maps.LatLng(52.136436, -0.460739);
  var myOptions = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  up206b.geocode();
}

var geocoder = new google.maps.Geocoder();

up206b.geocode = function() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
  var bounds = new google.maps.LatLngBounds();
  var addresses = [$('#address').val(), $('#address2').val()];

  addresses.forEach(function(address) {
    if (address) {
      geocoder.geocode({
        'address': address
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          createMarker(results[0].geometry.location, address, map);
          bounds.extend(results[0].geometry.location);
          map.fitBounds(bounds);
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  });
}

google.maps.event.addDomListener(window, "load", up206b.initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="address" value="New York, NY" />
<input id="address2" value="Newark, NJ" />
<input type="button" value="Submit" onClick="up206b.geocode()">
<div id="map_canvas"></div>

【讨论】：