Question

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

<!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>

Answer 1

你需要：

定义contentString
将标记与infowindow内容相关联。一种方法是使用匿名函数闭包，如相关问题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

代码段

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>

将鼠标悬停在标记上工作时遇到麻烦

1 个答案: