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

Question

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

我有一个非常简单的Google地图，其中包含一个标记，点击后会放大并显示一个infoWindow。我的问题是，当我用自定义图像标记替换标准标记时，它会放大但infoWindow无法显示。我一直在使用谷歌API doco和一些削减＆amp; amp;粘贴得到这个。

<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。注意：你不会看到那里的指针图标，因为它在我的系统上，我不知道如何提供它。但是你有比较的代码。

以下是我系统的结果：