GoogleMaps MarkerClusterer 信息窗口位置

Question

我对标记簇的信息窗口的位置有疑问。它不会出现在标记位置。相反，它位于地图的左上角。这是我的代码：

\n\n

<script type="text/javascript">\n  function initialize(cities) {\n    var mapOptions = {\n      center: new google.maps.LatLng(48.220, 15.199),\n      zoom: 9,\n      mapTypeId: google.maps.MapTypeId.ROADMAP,\n    };\n\n    var map = new google.maps.Map(document.getElementById("map"), mapOptions);\n    var markers=[];\n    var markerCluster = new MarkerClusterer(map, markers, {zoomOnClick: false});\n\n    //markerCluster should be always above the geocoder-->\n     geocoder = new google.maps.Geocoder();\n\n     for (var i = 0; i < cities.length; i++) {\n      var city = cities[i];\n      geocoder.geocode({\'address\': city.city+" Nieder\xc3\xb6sterreich"}, function(results, status){\n       if (status == google.maps.GeocoderStatus.OK) {\n        position=results[0].geometry.location;\n        var marker = new google.maps.Marker({\n         map: map,\n         position: position,\n         title: "Ort: "+city.city + "\\nBeitrag: " + city.title +"\\nRed.: "+ city.reporter +"\\nDatum: "+ city.storydate,\n        });\n        // below code alway lies inside the loop\n        markers.push(marker);\n        markerCluster.addMarker(marker);\n       }\n      });\n     };\n\n      // Listen for a cluster to be clicked\n      google.maps.event.addListener(markerCluster, \'clusterclick\', function(cluster) {\n        var markers = markerCluster.getMarkers();\n\n        var content = \'\';\n        for (var i = 0; i < markers.length; i++) {\n          var marker = markers[i];\n          content += marker.title;\n          content += ("<br>");\n        };\n        // Convert lat/long from cluster object to a usable MVCObject\n        var info = new google.maps.MVCObject;\n\n        var infowindow = new google.maps.InfoWindow();\n        // infowindow.setPosition(this.markerCluster.getCenter());\n        // infowindow.setPosition(latLng);\n        infowindow.close();\n        infowindow.setContent(content);\n        infowindow.open(map, info);\n        google.maps.event.addListener(map, \'zoom_changed\', function() { infowindow.close() });\n      });\n\n    }\n  </script>\n

\n

Answer 1

您的 MVCObject 没有任何属性。根据文档，如果您将可选anchor参数传递给函数.open，它必须公开 LatLng 位置属性，而您的则不会（因为它没有任何属性，所以不能公开任何属性）。

\n

\n

打开（地图？：地图|StreetViewPanorama，锚点？：MVCObject）

\n

\n

\n

返回值：无

\n

\n

\n

在给定地图上打开此信息窗口。可选地，信息窗口可以与锚点相关联。在核心 API 中，唯一的锚点是 Marker 类。但是，锚点可以是公开 LatLng 位置属性的任何 MVCObject，也可以是用于计算像素偏移的 Point 锚点属性（可选）（请参阅 InfoWindowOptions）。锚点是从锚点位置到信息窗口尖端的偏移量。

\n

\n

最简单的解决方案是不使用anchor参数，直接设置信息窗口的位置。

\n

google.maps.event.addListener(markerCluster, \'clusterclick\', function (cluster) {\n    var markers = cluster.getMarkers();\n\n    var content = \'\';\n    for (var i = 0; i < markers.length; i++) {\n        var marker = markers[i];\n        content += marker.title;\n        content += ("<br>");\n    }\n    var infowindow = new google.maps.InfoWindow();\n    infowindow.setPosition(cluster.getCenter());\n    infowindow.setContent(content);\n    infowindow.open(map);\n    google.maps.event.addListener(map, \'zoom_changed\', function () {\n        infowindow.close();\n    });\n});\n

\n

概念证明小提琴

\n

代码片段：

\n

\r\n

\r\n

google.maps.event.addListener(markerCluster, \'clusterclick\', function (cluster) {\n    var markers = cluster.getMarkers();\n\n    var content = \'\';\n    for (var i = 0; i < markers.length; i++) {\n        var marker = markers[i];\n        content += marker.title;\n        content += ("<br>");\n    }\n    var infowindow = new google.maps.InfoWindow();\n    infowindow.setPosition(cluster.getCenter());\n    infowindow.setContent(content);\n    infowindow.open(map);\n    google.maps.event.addListener(map, \'zoom_changed\', function () {\n        infowindow.close();\n    });\n});\n

\r\n

var geocoder;\nvar markers = [];\n\nfunction initialize(cities) {\n  var mapOptions = {\n    center: new google.maps.LatLng(48.220, 15.199),\n    zoom: 9,\n    mapTypeId: google.maps.MapTypeId.ROADMAP\n  };\n\n  var map = new google.maps.Map(document.getElementById("map"), mapOptions);\n  var markerCluster = new MarkerClusterer(map, markers, {\n    zoomOnClick: false,\n    imagePath: \'https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/images/m\'\n  });\n\n  //markerCluster should be always above the geocoder-->\n  geocoder = new google.maps.Geocoder();\n\n  for (var i = 0; i < cities.length; i++) {\n    var city = cities[i];\n    geocodeCity(city, markerCluster);\n  }\n\n  // Listen for a cluster to be clicked\n  google.maps.event.addListener(markerCluster, \'clusterclick\', function(cluster) {\n    var markers = cluster.getMarkers();\n\n    var content = \'\';\n    for (var i = 0; i < markers.length; i++) {\n      var marker = markers[i];\n      content += marker.title;\n      content += ("<br>");\n    }\n    var infowindow = new google.maps.InfoWindow();\n    infowindow.setPosition(cluster.getCenter());\n    infowindow.close();\n    infowindow.setContent(content);\n    infowindow.open(map);\n    google.maps.event.addListener(map, \'zoom_changed\', function() {\n      infowindow.close();\n    });\n  });\n\n}\n\nfunction geocodeCity(city, markerCluster) {\n  geocoder.geocode({\n    \'address\': city.city + " Nieder\xc3\xb6sterreich"\n  }, function(results, status) {\n    if (status == google.maps.GeocoderStatus.OK) {\n      position = results[0].geometry.location;\n      var marker = new google.maps.Marker({\n        map: map,\n        position: position,\n        title: "Ort: " + city.city + "\\nBeitrag: " + city.title + "\\nRed.: " + city.reporter + "\\nDatum: " + city.storydate\n      });\n      // below code alway lies inside the loop\n      markers.push(marker);\n      markerCluster.addMarker(marker);\n    } else {\n      document.getElementById(\'info\').innerHTML += city.city + " status=" + status + "<br>";\n    }\n  });\n}\ngoogle.maps.event.addDomListener(window, "load", function() {\n  initialize(cities);\n});\n\n\nvar cities = [{\n  city: "Sankt Polten",\n  title: "title 0",\n  reporter: "reporter 0",\n  storydate: "November 25,2015 00:00:00"\n}, {\n  city: "Wiener Neustadt",\n  title: "title 1",\n  reporter: "reporter 1",\n  storydate: "November 25, 2015 01:01:01"\n}, {\n  city: "Baden",\n  title: "title 2",\n  reporter: "reporter 2",\n  storydate: "November 25,2015 02:02:02"\n}, {\n  city: "Klosterneuburg",\n  title: "title 3",\n  reporter: "reporter 3",\n  storydate: "November 25, 2015 03:03:03"\n}, {\n  city: "Krems",\n  title: "title 4",\n  reporter: "reporter 4",\n  storydate: "November 25,2015 04:04:04"\n}, {\n  city: "Amstetten",\n  title: "title 5",\n  reporter: "reporter 5",\n  storydate: "November 25, 2015 05:05:05"\n}, {\n  city: "Modling",\n  title: "title 6",\n  reporter: "reporter 6",\n  storydate: "November 25,2015 06:06:06"\n}, {\n  city: "Traiskirchen",\n  title: "title 7",\n  reporter: "reporter 7",\n  storydate: "November 25, 2015 07:07:07"\n}, {\n  city: "Schwechat",\n  title: "title 8",\n  reporter: "reporter 8",\n  storydate: "November 25,2015 08:08:08"\n}, {\n  city: "Ternitz",\n  title: "title 9",\n  reporter: "reporter 9",\n  storydate: "November 25, 2015 09:09:09"\n}, {\n  city: "Stockerau",\n  title: "title 10",\n  reporter: "reporter 10",\n  storydate: "November 25,2015 10:10:10"\n}];

\r\n

html,\nbody,\n#map {\n  height: 100%;\n  width: 100%;\n  margin: 0px;\n  padding: 0px\n}

\r\n

\r\n

\r\n

\n