Google Maps API - InfoWindow 未使用自定义标记图标打开

Question

我花了几天时间试图解决这个问题，但无济于事。任何帮助将不胜感激。

我有一个非常简单的带有一个标记的谷歌地图，当点击它时会放大并显示一个信息窗口。我的问题是，当我用自定义图像标记替换标准标记时，它会放大但 infoWindow 无法出现。我一直在使用 Google API doco 和一些剪切和粘贴来获得这个。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-22.062160, 144.142205);
  var mapOptions = {
     zoom: 4,
     mapTypeId: google.maps.MapTypeId.HYBRID,
     center: myLatlng
  };

var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var image = 'images/cccMap.png';
  var myLatLng = new google.maps.LatLng(-22.062160, 144.142205);
  var cccMarker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image,
      title: 'Click to zoom to Orielton, Crown Cattle Company',
      animation: google.maps.Animation.DROP
  })

var infowindow = new google.maps.InfoWindow({
    content:"<h1>Orielton</h1><p>Welcome to the center of Queensland.</p><p>View <a href=\"https://www.facebook.com/helen.robertson.1420354/photos\">Photos</a> or <a href=\"https://www.youtube.com/channel/UC-5HtaAWdumQLJj6vILBCiQ/videos\">Videos</a></p>",
    maxWidth: 200
  });

var cloudLayer = new google.maps.weather.CloudLayer();
    cloudLayer.setMap(map);

google.maps.event.addListener(cccMarker, 'click', function() {
    map.setZoom(15);
    map.setCenter(marker.getPosition());
    infowindow.open(map,marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

我确信这很简单，但我真的可以使用帮助。干杯。

Answer 1

您的代码：

google.maps.event.addListener(cccMarker, 'click', function() {
   map.setZoom(15);
   map.setCenter(marker.getPosition());
   infowindow.open(map,marker);
});

您正在尝试将标记“cccMarker”分配为第一个参数，但它已在infowindow.open(map,marker); 行中分配（尝试正确）– 删除 addListener() 的第一个参数并将其正确分配为“cccMarker”（你在 infowindow 的 open() 中写了 "marker")。

应该是这样的：

google.maps.event.addListener('click', function() {
   map.setZoom(15);
   map.setCenter(marker.getPosition());
   infowindow.open(map,cccMarker);
});

这样它应该可以正常工作。

Answer 2

你做的几乎是对的。 marker 在 click 事件监听器中未定义：

google.maps.event.addListener(cccMarker, 'click', function() {
    map.setZoom(15);
    map.setCenter(marker.getPosition());
    infowindow.open(map,marker);
  });
}

将您的事件侦听器更改为：

google.maps.event.addListener(cccMarker, 'click', function() {

    map.setZoom(15);
    map.setCenter(cccMarker.getPosition());
    infowindow.open(map, cccMarker);
  });
}

这里是the whole code at jsbin。注意：你不会在那里看到指针图标，因为它在我的系统上，我不知道如何提供它。但是你有代码可以比较。

这是我系统的结果：