Question

我在我的网站上使用谷歌地图，它工作正常。但如果我使用自己的标记图像，则信息窗口将不再弹出。有谁知道为什么？

您可以在https://www.hauskataloge24.de/index.php?id=6

看到没有我自己标记的整个项目

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 6,
        center: {lat: 50.984768, lng: 11.029880}
    });

    setMarkers(map);
}

var musters = <?php echo json_encode($musters); ?>;

function setMarkers(map) {
    var image = {
        url: 'img/markerBlue.png'
    };

    for (var i = 0; i < musters.length; i++) {
        var muster = musters[i];
        var infowindow = new google.maps.InfoWindow(); /* SINGLE */

        var markers = new google.maps.Marker({
            position: {lat: muster[1], lng: muster[2]},
            map: map,
            icon: image,
            title: muster[0]
        });

        placeMarker(muster);

        function placeMarker(loc) {
            var latLng = new google.maps.LatLng( loc[1], loc[2]);
            var marker = new google.maps.Marker({
                position : latLng,
                map      : map
            });
            google.maps.event.addListener(marker, 'click', function(){
                infowindow.close(); // Close previously opened infowindow
                infowindow.setContent( "<div id='infowindow'>"+ loc[3] +"</div>");
                infowindow.open(map, marker);
            });
        }
    }
}

Answer 1

这里有关于自定义标记的文档，其中包含一个JSFiddle示例：

https://developers.google.com/maps/documentation/javascript/custom-markers

我修改了上述文档中的示例，以便在按下标记时出现信息。请在此处查看我的小提琴（注意：您需要将API密钥添加到代码中才能使其正常工作，我将其移除以确保安全性）：

https://jsfiddle.net/tmgz0vau/

自定义标记图标的代码示例：

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
  parking: {
    icon: iconBase + 'parking_lot_maps.png'
  },
  library: {
    icon: iconBase + 'library_maps.png'
  },
  info: {
    icon: iconBase + 'info-i_maps.png'
  }
};

var infowindow = new google.maps.InfoWindow({
      content: 'this is a test'
});

function addMarker(feature) {
  var marker = new google.maps.Marker({
    position: feature.position,
    icon: icons[feature.type].icon,
    map: map
  });

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

var features = [
  {
    position: new google.maps.LatLng(-33.91721, 151.22630),
    type: 'info'
  }, {
    position: new google.maps.LatLng(-33.91539, 151.22820),
    type: 'info'
  }, {
    position: new google.maps.LatLng(-33.91747, 151.22912),
    type: 'info'
  }, {
    position: new google.maps.LatLng(-33.91910, 151.22907),
    type: 'info'
  }, {
    position: new google.maps.LatLng(-33.91725, 151.23011),
    type: 'info'
  }, {
    position: new google.maps.LatLng(-33.91872, 151.23089),
    type: 'info'
  }, {
    position: new google.maps.LatLng(-33.91784, 151.23094),
    type: 'info'
  }, {
    position: new google.maps.LatLng(-33.91682, 151.23149),
    type: 'info'
  }, {
    position: new google.maps.LatLng(-33.91790, 151.23463),
    type: 'info'
  }, {
    position: new google.maps.LatLng(-33.91666, 151.23468),
    type: 'info'
  }, {
    position: new google.maps.LatLng(-33.916988, 151.233640),
    type: 'info'
  }, {
    position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
    type: 'parking'
  }, {
    position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
    type: 'parking'
  }, {
    position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
    type: 'parking'
  }, {
    position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
    type: 'parking'
  }, {
    position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
    type: 'parking'
  }, {
    position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
    type: 'parking'
  }, {
    position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
    type: 'parking'
  }, {
    position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
    type: 'library'
  }
];

for (var i = 0, feature; feature = features[i]; i++) {
  addMarker(feature);
}

我希望这有帮助！

Answer 2

嘿，伙计，谢谢你的帮助。这不是我想要的，但它帮助我找到了解决方案。 THX。

我忘了在我的函数placeMarker（）

中添加图标

现在我明白了，它运作正常。谢谢： - ）

        function placeMarker(loc) {
            var latLng = new google.maps.LatLng( loc[1], loc[2]);
            var marker = new google.maps.Marker({
                position : latLng,
                icon: icons.icon,
                map      : map
            });
            google.maps.event.addListener(marker, 'click', function(){
                infowindow.close(); // Close previously opened infowindow
                infowindow.setContent( "<div id='infowindow'>"+ loc[3] +"</div>");
                infowindow.open(map, marker);
            });
        }

Google Maps API信息窗口无法打开

2 个答案: