Question

我正在尝试激活自定义marer的infowindow，产生关于标记的小描述，此刻我遇到了一些麻烦，我有自定义标记工作但是我无法获得infowindow展示。

我尝试调用标记的监听器并将其存储在变量＆＃34; customMarker＆＃34;中，然后调用另一个鼠标悬停监听器来激活信息窗口，但我没有运气，任何人都可以帮助我出？

    var map;
    //Creates a custom icon to be placed on the map                                 
    var goldStar = 'https://cdn2.iconfinder.com/data/icons/august/PNG/Star%20Gold.png';

function initialize() {

    //Sets the zoom amount for the map, the higher the number, the closer the zoom amount
  var mapOptions = {
    zoom: 18
    //center : myLatLng
  };

  //The map object itself
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

   var contentString = 'This is a custom toolTip';

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  }); 
  // Tries to find user location using HTML 5
  if(navigator.geolocation) 
  {

    //sets the map to the position of the user using location
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);


      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }

  var customMarker = google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng, map);
  });

  //This listener is not working
  //google.maps.event.addListener(customMarker, 'mouseover', function() {
  //infowindow.open(map,customMarker);
    //});
}

function placeMarker(location, map) 
{
  var marker = new google.maps.Marker({
        position: location,
        icon: goldStar,
        map: map,
        title: "custom marker",
        draggable:true
    });
    map.panTo(location);
}

Answer 1

google.maps.event.addListener函数不会返回标记。这不会起作用：

var customMarker = google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(event.latLng, map);
});

将placeMarker函数中的事件侦听器分配给您创建的标记（还提供了在标记上保持函数闭包的优点）：

function placeMarker(location, map) {
    var marker = new google.maps.Marker({
        position: location,
        icon: goldStar,
        map: map,
        title: "custom marker",
        draggable: true
    });
    var contentString = 'This is a custom toolTip';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });    
    google.maps.event.addListener(marker, 'mouseover', function() {
      infowindow.open(map,marker);
    });
    map.panTo(location);
}

working fiddle

Google Maps API - 激活自定义标记的信息窗口

1 个答案: