Google 地图 API v3 多个标记因自定义图像而无法使用？

Question

我使用的是基于 Google's example 的当前代码，它使用一个标记可以正常工作，但是当我尝试使用多个标记时它会失败。

我认为这可能与我的自定义标记图像有关，但不确定，因为我不太擅长这个...有人有什么想法吗？

function initialize() {

  var beaches = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
  ];

  var myLatLng = new google.maps.LatLng(beach[1], beach[2], beach[3]);
  var mapPKCanvas = document.getElementById('main-map');

  var mapPKOptions = {
    center: new google.maps.LatLng(-33.890542, 151.274856),
    zoom: 15,
    draggable: true,
    scrollwheel: false,
    mapTypeControl: false,
    scaleControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var mainMapPK = new google.maps.Map(mapPKCanvas, mapPKOptions)
  var url = 'https://www.customimage-map.png';
  var size = new google.maps.Size(64, 78);
  if (window.devicePixelRatio > 1.5) {
    url = 'https://www.customimage-mapx2.png';
    size = new google.maps.Size(64, 78);
  }
  var image = {
    url: url,
    size: size,
    scaledSize: new google.maps.Size(64, 78),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(18, 20)
  };
  var marker = new google.maps.Marker({
    position: myLatLng.getCenter(),
    map: mainMapPK,
    icon: image
  });

  marker.addListener('click', function() {
    infowindow.open(mainMapPK, marker);
  });

  google.maps.event.trigger(mainMapPK, "resize");

}

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

Answer 1

假设您的图像路径是正确的，我没有发现您的自定义标记实施有任何问题。但是，我确实在您发布的代码片段中看到了几个问题。

首先，beach不存在。应该是beaches。此外，这是一个二维数组，因此您应该相应地访问坐标：

google.maps.LatLng(beaches[0][1], beaches[0][2])  // -33.890542, 151.274856

其次，要设置标记的位置，您使用 getCenter() 而不是 LatLng class does not support. If you want to use getCenter(), use the LatLngBounds class。否则，只需将标记的位置按原样设置为您的 LatLng。

尝试下面修改后的代码示例：

<div id="main-map" style="height:450px;"></div>

<script>
    function initialize() {

        var beaches = [
            ['Bondi Beach', -33.890542, 151.274856, 4],
            ['Coogee Beach', -33.923036, 151.259052, 5],
            ['Cronulla Beach', -34.028249, 151.157507, 3],
        ];

        var mapPKCanvas = document.getElementById('main-map');

        var mapPKOptions = {
            center: new google.maps.LatLng(-33.890542, 151.274856),
            zoom: 10,
            draggable: true,
            scrollwheel: false,
            mapTypeControl: false,
            scaleControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var mainMapPK = new google.maps.Map(mapPKCanvas, mapPKOptions)

        var url = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/parking_lot_maps.png';

        var size = new google.maps.Size(64, 78);

        if (window.devicePixelRatio > 1.5) {
            url = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/library_maps.png';
            size = new google.maps.Size(64, 78);
        }

        var image = {
            url: url,
            size: size,
            scaledSize: new google.maps.Size(64, 78),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(18, 20)
        };

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(beaches[2][1], beaches[2][2]),
            map: mainMapPK,
            icon: image
        });

        var marker2 = new google.maps.Marker({
            position: new google.maps.LatLng(beaches[1][1], beaches[1][2]),
            map: mainMapPK,
            icon: image
        });

        var marker3 = new google.maps.Marker({
            position: new google.maps.LatLng(beaches[0][1], beaches[0][2]),
            map: mainMapPK,
            icon: image
        });
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize"></script>

希望对您有所帮助！

Google 地图 API v3 多个标记因自定义图像而无法使用？

Google Maps API v3 multiple markers not working due to custom images?

google-maps

google-maps-api-3