我有一个基于开放数据财务数据集的网站，我已经开始使用Google Maps JavaScript API进行映射。我通常不会执行JavaScript，但设法运行用户输入的基本地图（Example）。
唯一的问题是，在同一邮政编码上有多个标记的情况下，无论缩放如何，都只显示一个标记。
我正在尝试实现其中一个修补程序Spiderfy或将JS用于slightly alter the lat & lon，其中数组中有多个实例。后一种方法对我来说最简单，但我可以帮助将它与现有脚本集成。
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: -19.5541589, lng: 145.7731922}
});
setMarkers(map);
}
// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var recipientes = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map) {
// Adds markers to the map.
// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.
// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
var image = {
url: 'https://openaus.net.au/scripts/images/Flag1-orange-icon.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 22),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 22)
};
// Shapes define the clickable region of the icon. The type defines an HTML
// <area> element 'poly' which traces out a polygon as a series of X,Y points.
// The final coordinate closes the poly by connecting to the first coordinate.
var shape = {
coords: [1, 1, 1, 40, 36, 40, 36, 1],
type: 'poly'
};
for (var i = 0; i < recipientes.length; i++) {
var recipient = recipientes[i];
var marker = new google.maps.Marker({
position: {lat: recipient[1], lng: recipient[2]},
map: map,
icon: image,
shape: shape,
title: recipient[0],
zIndex: recipient[3]
});
}
}
</script>
<script async defer
src="API key">
</script>
我不知道如何更改解决方案以使用现有代码：
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: -19.5541589, lng: 145.7731922}
});
setMarkers(map);
}
// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var recipientes = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map) {
// Adds markers to the map.
// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.
// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
var image = {
url: 'https://openaus.net.au/scripts/images/Flag1-orange-icon.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 22),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 22)
};
// Shapes define the clickable region of the icon. The type defines an HTML
// <area> element 'poly' which traces out a polygon as a series of X,Y points.
// The final coordinate closes the poly by connecting to the first coordinate.
var shape = {
coords: [1, 1, 1, 40, 36, 40, 36, 1],
type: 'poly'
};
for (var i = 0; i < recipientes.length; i++) {
var recipient = recipientes[i];
var marker = new google.maps.Marker({
position: {lat: recipient[1], lng: recipient[2]},
map: map,
icon: image,
shape: shape,
title: recipient[0],
zIndex: recipient[3]
});
}
}
//get array of markers currently in cluster
var allMarkers = namespace.mapParams.mapMarkersArray;
//final position for marker, could be updated if another marker already exists in same position
var finalLatLng = latlng;
//check to see if any of the existing markers match the latlng of the new marker
if (allMarkers.length != 0) {
for (i=0; i < allMarkers.length; i++) {
var existingMarker = allMarkers[i];
var pos = existingMarker.getPosition();
//if a marker already exists in the same position as this marker
if (latlng.equals(pos)) {
//update the position of the coincident marker by applying a small multipler to its coordinates
var newLat = latlng.lat() + (Math.random() -.5) / 1500;// * (Math.random() * (max - min) + min);
var newLng = latlng.lng() + (Math.random() -.5) / 1500;// * (Math.random() * (max - min) + min);
finalLatLng = new google.maps.LatLng(newLat,newLng);
}
}
}
var marker = new google.maps.Marker({
map: msf_namespace.mapParams.resultmap,
position: finalLatLng,
title: name,
icon: markericon
});
//add each generated marker to mapMarkersArray
namespace.mapParams.mapMarkersArray.push(marker);
</script>
<script async defer
src="API key">
</script>
如果有人能帮助我解决这个问题，我真的很感激。