无法点击谷歌地图地理标记群集以获取信息

Question

我正在尝试从geojson文件中放置标记，并允许它们可单击以获取更多信息(信息窗口)。

这是我的代码

<script>
var map, infoWindow, trafficLayer;
function toggleTraffic(){
if(trafficLayer.getMap() == null){
//traffic layer is disabled.. enable it
trafficLayer.setMap(map);
} else {
//traffic layer is enabled.. disable it
trafficLayer.setMap(null);             
}
}
function initMap() {
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'mapdark.json', true);
xobj.onreadystatechange = function() {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
};
xobj.send(null);
}
var loaded_json
var infowindow = new google.maps.InfoWindow({ });
loadJSON(function(response) {
loaded_json = JSON.parse(response);
var styledMapType = new google.maps.StyledMapType(loaded_json, {
name: 'Map'
});
var h=get_cookie('pos');
if (h) {
h=h.split(',');
var lat=parseFloat(h[0]);
var lng=parseFloat(h[1]);
var zoom=parseInt(h[2]);
} else {
var lat=40;
var lng=15;
var zoom=7;
}
var map = new google.maps.Map(document.getElementById('map'),{center:{lat:lat,lng:lng},zoom:zoom,gestureHandling:'greedy'});
infoWindow = new google.maps.InfoWindow;
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
map.data.loadGeoJson('../json/geo.php', null, function (features) {
var markers = features.map(function(feature) {
var g = feature.getGeometry();
var iconurl = feature.getProperty('icon');
var marker = new google.maps.Marker({ 
'position': g.get(0) ,
'icon': iconurl
});
return marker;
});
var markerCluster = new MarkerClusterer(map, markers,{ imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' });    
});
map.data.addListener('click', function(event) {
var title = event.feature.getProperty("title");
var address = event.feature.getProperty("address");
var contentString = '<div style="width: 94.2%; padding-left:10px; height: 25px;float: left;color: #FFF;background: #0b3061;font-size: 16px;line-height: 25px;border-radius:5px 5px 0px 0px;"><strong><b>' + title + '</b></strong><br></div><br><div><p align="left"><b>Address: </b>' + address + '<br></div>';
infoWindow.setContent(contentString);
infowindow.setPosition(event.feature.getGeometry().get());
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
infoWindow.open(map, anchor);
map.setCenter(featurePosition); 
console.log('test'); 
});
map.data.setStyle(function (feature) { return { icon: feature.getProperty('icon'), visible: false }; });
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
//console.log(loaded_json)
});
function get_cookie(cname) {
var name=cname+"=";
var ca=document.cookie.split(';');
for(var i=0;i<ca.length;i++) {
var c=ca[i];
while (c.charAt(0)==' ') {
c=c.substring(1);
}
if (c.indexOf(name)==0) {
return c.substring(name.length,c.length);
}
}
return '';
}  
}
</script>

我也尝试了marker.addListener('click', function(event)而不是map.data.addListener('click', function(event)但console.log('test');也没有显示在日志中。不幸的是，我没有收到错误(也没有点击)，大多数在线示例都在内部显示 geojson。

集群，标记，样式和定位都有效。

成功显示信息窗口缺少什么？

Answer 1

不确定为什么它在您的情况下不起作用，但要使标记可单击，您可以将click事件处理程序添加到Marker对象中，如下所示：

var markers = features.map(function(feature) {
var g = feature.getGeometry();
var iconurl = feature.getProperty('icon');
var marker = new google.maps.Marker({ 
'position': g.get(0) ,
'icon': iconurl
});
marker.addListener('click', function (event) {
infowindow.setContent("Marker");
infowindow.open(map, marker);
}); 

return marker;
});

演示

function initMap() {
var dataUrl = "https://storage.googleapis.com/mapsdevsite/json/google.json";
var infowindow = new google.maps.InfoWindow({});
var map = new google.maps.Map(document.getElementById('map'), { center: { lat: -28, lng: 137 }, zoom: 4, gestureHandling: 'greedy' });
google.maps.event.addListener(map, 'click', function () {
infowindow.close();
});
map.data.loadGeoJson(dataUrl, null, function (features) {
var markers = [];
features.forEach(function (feature) {
var coordinates = feature.getGeometry().getAt(0);
var iconurl = feature.getProperty('icon');
coordinates.forEachLatLng(function (latLng) {
var marker = new google.maps.Marker({
'position': latLng,
'icon': iconurl
});
marker.addListener('click', function (event) {
infowindow.setContent("Marker");
infowindow.open(map, marker);
});
markers.push(marker);
});
});
var markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' });
});
}
google.maps.event.addDomListener(window, 'load', initMap);

#map {
width: 100%;
height: 640px;
}

<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>

<div id="map"></div>

对于集群标记，要在单击标记后显示信息窗口，请附加clusterclick事件处理程序，如下所示：

var markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m',zoomOnClick: false });

google.maps.event.addListener(markerCluster, 'clusterclick', function (cluster) {
infowindow.setPosition(cluster.getCenter());
infowindow.setContent("Cluster marker");
infowindow.open(map);
});