google-maps-api-3 - 为具有相同位置的标记聚类器显示信息窗口
问题描述
我正在使用 MarkerClusterer 脚本在地图上显示图钉。当用户点击一个图钉时,它会显示一个信息窗口。这适用于单个引脚。
还有多个引脚位置完全相同,根据 MarkerClusterer 文档,应该可以显示信息窗口,其中包含该集群下所有引脚的汇总描述。这是使用infoOnClick: true
选项和infoOnClickZoom
设置完成的。
然而,这似乎不能正常工作。它显示信息窗口,但始终位于地图上的同一位置。即使我点击不同的集群,信息窗口也会显示在最后一个位置。
我想我的代码中遗漏了一些东西。
我做了一个演示来演示这个问题: https ://jsfiddle.net/JospoDev/htj42kvz/
(出于某种原因,在这个 JSFiddle 中,分组集群的信息窗口根本不显示,但它适用于实时代码)
这是我正在使用的代码:
var map = null;
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 150)
});
// Draw map and make clusterers
function drawMap() {
var rows = [
[
"Marker 01",
"Address 01",
"Description 01",
"1.746491908970114, 16.92597806453705"
],
[
"Marker 02",
"Address 02",
"Description 02",
"1.7468350744069, 16.917788091659546"
],
[
"Marker 03",
"Address 03",
"Description 03",
"1.74514002150984, 16.935933225260244"
],
[
"Marker 04",
"Address 04",
"Description 04",
"1.74514002150984, 16.935933225260244"
],
[
"Marker 05",
"Address 05",
"Description 05",
"1.74514002150984, 16.935933225260244"
],
[
"Marker 06",
"Address 06",
"Description 06",
"1.74514002150984, 16.945933225260244"
],
[
"Marker 07",
"Address 07",
"Description 07",
"1.74514002150984, 16.945933225260244"
],
[
"Marker 08",
"Address 08",
"Description 08",
"1.74514002150984, 16.945933225260244"
]
];
map.markers = [];
for (var i in rows) {
var latlng = rows[i][3];
var htmlDescription = '';
var commaPos = latlng.indexOf(',');
var coordinatesLat = parseFloat(latlng.substring(0, commaPos));
var coordinatesLong = parseFloat(latlng.substring(commaPos + 1, latlng.length));
// Postition
var markerpos = new google.maps.LatLng(coordinatesLat, coordinatesLong);
// Description
htmlDescription = '<strong>' + rows[i][0] + '</strong> — ' + rows[i][1];
// Create marker
map.markers.push(createMarker(markerpos, rows[i][0], htmlDescription));
}
mc.addMarkers(map.markers);
}
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: name,
content: html
});
marker.info = new google.maps.InfoWindow({
content: html
});
// Event listener for click function
google.maps.event.addListener(marker, 'click', function(evt) {
infowindow.setContent(html);
infowindow.open(map, marker);
});
return marker;
}
// Initialize google map and run query
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(1.74514002150984, 16.925833225250244),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Cluster options
var mcOptions = {
infoOnClick: true, // Display info window on click
zoomOnClick: false, // Don't zoom on click
infoOnClickZoom: 14, // Threshold for displaying info window
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
};
// Mark Clusterer
mc = new MarkerClusterer(map, map.markers, mcOptions);
// Close the info window when clicking on the map
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Draw map
drawMap();
}
// Callback to initialize
google.maps.event.addDomListener(window, 'load', initialize);
谢谢您的帮助。
解决方案
我遇到了和你遇到的类似的问题。我正在创建标记,但它也会显示在我创建的最后一个标记上。我发现问题是因为我在 for 循环中创建了一个新标记。无论出于何种原因,不断覆盖以前的标记。
我通过创建一个创建标记的函数来解决这个问题,并使用我需要的任何数据调用它并返回标记。
推荐阅读
- android - AWS Cognito 用户:设备确认失败
- java - 更改 WireMock __files 目录
- python - 从python中的csv中删除行
- reactjs - GD 7.2.0 to 7.4.0 library upgrade issues
- python - 使用python将数据从.csv文件导入mysql
- swift - Swift: Is there an OS agnostic way to get the home directory?
- javascript - What is the alternative for requestTimeout for Sequelize version 6.13.4?
- excel - Unable to save Excel file from server
- typo3 - Give a class to specific Page in Main Menu in Typo3
- aspnetboilerplate - Entity History is not working in aspnetboilerplate