Google Maps Marker Clusterer：标记从不聚集
[英]Google Maps Marker Clusterer: markers never cluster
问题描述
我不知道为什么标记聚类器不显示我的标记分组，就像这里： http : //media.svennerberg.com/2009/01/screenshot_clusterereffect.jpg
我在 Google 地图标记聚类中遇到了问题。 我正在使用 api v3，但由于某些原因，我无法弄清楚，我无法应用标记聚类。 我会很感激任何帮助和建议。
我的代码是这样的：
<!DOCTYPE HTML> <html lang="pl"> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_n_0mOPCs7DxlW4t6rzSiD0KyUXQktVY&callback=myMap"></script> <script type="text/javascript"> var map; var infoWindow; var markersData = [ {lat: 50.25202, lng: 19.015023, name: "Test1", address1: "Test1", address2: "Test1", address3: "2019-03-13", address4: "2019-03-13", ikona: "http://historia-lokalna.pl/images/places.png" , wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"}, {lat: 49.824791, lng: 19.040867, name: "Test2", address1: "Test2", address2: "Test2", address3: "2019-03-22", address4: "2019-03-22", ikona: "http://historia-lokalna.pl/images/places.png" , wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"}, {lat: 50.334918, lng: 18.14136, name: "Test3", address1: "Test3", address2: "Test3", address3: "2019-03-08", address4: "2019-03-08", ikona: "http://historia-lokalna.pl/images/places.png" , wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"}, {lat: 49.825794, lng: 19.040889, name: "Test4", address1: "Test4", address2: "Test4", address3: "2019-03-13", address4: "2019-03-13", ikona: "http://historia-lokalna.pl/images/places.png" , wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"}, ] function initialize() { var mapOptions = { center: new google.maps.LatLng(50.57628900072813,21.356987357139587), zoom: 9, mapTypeId: 'roadmap', }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); infoWindow = new google.maps.InfoWindow(); google.maps.event.addListener(map, 'click', function() { infoWindow.close(); }); displayMarkers(); // I added a marker clusterer to manage the markers. var markerCluster = new MarkerClusterer(map, marker, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); // End } google.maps.event.addDomListener(window, 'load', initialize); function displayMarkers(){ var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markersData.length; i++){ var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng); var name = markersData[i].name; var address1 = markersData[i].address1; var address2 = markersData[i].address2; var address3 = markersData[i].address3; var address4 = markersData[i].address4; var image = markersData[i].ikona; var wwwsite = markersData[i].wwwsite; createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite); bounds.extend(latlng); } map.fitBounds(bounds); } function createMarker(latlng, name, address1, address2,address3,address4, image, wwwsite){ var marker = new google.maps.Marker({ map: map, position: latlng, title: name, icon: image }); google.maps.event.addListener(marker, 'click', function() { var iwContent = '<div id="iw_container">' + '<div class="iw_title">' + name + '</div>' + '<div class="iw_content">' + address1 + '<br />' + address2 + '<br />' +address3 + '<br />' +address4 + '<br />' + wwwsite + '</div></div>'; infoWindow.setContent(iwContent); infoWindow.open(map, marker); }); } </script> <!-- I added a javascript markerclusterer --> <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> <!-- End --> </head> <body> <h2 class="przeg">Map:</h2> <div id="map-canvas"style="width:100%;height:600px;"> </div> </body> </html>
1 个解决方案
解决方案1
0 2019-03-09 17:34:04
查看文档中的示例和您的代码，可能最简单的“修复”是在显示标记例程中实例化标记聚类器，然后在创建时将每个标记添加到聚类器：
注释：
- 您在脚本包含（
&callback=myMap）中指定了一个回调，但没有该名称的函数（只需从您的脚本包含中删除它）。 在控制台中导致此错误：
"myMap is not a function"
- 有一个 javascript 错误
Uncaught ReferenceError: marker is not definedon this line:var markerCluster = new MarkerClusterer(map, marker,因为在那个范围内没有可用的变量marker（正如@MrUpsidown 在他的评论中观察到的那样，这应该是标记数组）。为了解决这个问题，我建议使用MarkerClusterer.addMarker方法在displayMarkers添加标记，并更改createMarker函数以返回它创建的marker。
function displayMarkers() {
// marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, [], {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markersData.length; i++) {
var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
var name = markersData[i].name;
var address1 = markersData[i].address1;
var address2 = markersData[i].address2;
var address3 = markersData[i].address3;
var address4 = markersData[i].address4;
var image = markersData[i].ikona;
var wwwsite = markersData[i].wwwsite;
markerCluster.addMarker(createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite));
bounds.extend(latlng);
}
map.fitBounds(bounds);
}
function createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite) {
var marker = new google.maps.Marker({
map: map,
position: latlng,
title: name,
icon: image
});
google.maps.event.addListener(marker, 'click', function() {
var iwContent = '<div id="iw_container">' +
'<div class="iw_title">' + name + '</div>' +
'<div class="iw_content">' + address1 + '<br />' +
address2 + '<br />' + address3 + '<br />' + address4 + '<br />' +
wwwsite + '</div></div>';
infoWindow.setContent(iwContent);
infoWindow.open(map, marker);
});
return marker;
}
代码片段：
html, body { height: 100%; margin: 0; padding: 0; }
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <script type="text/javascript"> var map; var infoWindow; var markersData = [ { lat: 50.25202, lng: 19.015023, name: "Test1", address1: "Test1", address2: "Test1", address3: "2019-03-13", address4: "2019-03-13", ikona: "http://historia-lokalna.pl/images/places.png", wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>" }, { lat: 49.824791, lng: 19.040867, name: "Test2", address1: "Test2", address2: "Test2", address3: "2019-03-22", address4: "2019-03-22", ikona: "http://historia-lokalna.pl/images/places.png", wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>" }, { lat: 50.334918, lng: 18.14136, name: "Test3", address1: "Test3", address2: "Test3", address3: "2019-03-08", address4: "2019-03-08", ikona: "http://historia-lokalna.pl/images/places.png", wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>" }, { lat: 49.825794, lng: 19.040889, name: "Test4", address1: "Test4", address2: "Test4", address3: "2019-03-13", address4: "2019-03-13", ikona: "http://historia-lokalna.pl/images/places.png", wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>" }, ] function initialize() { var mapOptions = { center: new google.maps.LatLng(50.57628900072813, 21.356987357139587), zoom: 9, mapTypeId: 'roadmap', }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); infoWindow = new google.maps.InfoWindow(); google.maps.event.addListener(map, 'click', function() { infoWindow.close(); }); displayMarkers(); // End } google.maps.event.addDomListener(window, 'load', initialize); function displayMarkers() { // marker clusterer to manage the markers. var markerCluster = new MarkerClusterer(map, [], { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' }); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markersData.length; i++) { var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng); var name = markersData[i].name; var address1 = markersData[i].address1; var address2 = markersData[i].address2; var address3 = markersData[i].address3; var address4 = markersData[i].address4; var image = markersData[i].ikona; var wwwsite = markersData[i].wwwsite; markerCluster.addMarker(createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite)); bounds.extend(latlng); } map.fitBounds(bounds); } function createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite) { var marker = new google.maps.Marker({ map: map, position: latlng, title: name, // icon: image - so shows default icon in code snippet }); google.maps.event.addListener(marker, 'click', function() { var iwContent = '<div id="iw_container">' + '<div class="iw_title">' + name + '</div>' + '<div class="iw_content">' + address1 + '<br />' + address2 + '<br />' + address3 + '<br />' + address4 + '<br />' + wwwsite + '</div></div>'; infoWindow.setContent(iwContent); infoWindow.open(map, marker); }); return marker; } </script> <!-- markerclusterer script --> <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> <!-- End --> <h2 class="przeg">Map:</h2> <div id="map-canvas" style="width:100%;height:80%;"> </div>
谷歌地图集群器没有标记
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.