在纬度/经度值超过5位小数的Google地图上移动标记

Question

I am placing some markers on to a map from a JSON array, some have the same longitude and latitude so I am trying to offset these by 0.00005. This works for most of the markers however it seems that there are some which do not want to budge, I can only put it down to the coordinates being longer than 5 decimal places and when I do my addition it doesn't calculate properly.

I've attempted to parseFloat(latitude).toFixed(5) for every latitude, same for longitude however it seems when added to the map it still has extra decimal places.

JSON Array:

0: {machineName: "PC38", clientName: "The Client", latitude: "-32.93340", longitude: "151.76830"}
1: {machineName: "PC25", clientName: "The Client", latitude: "-32.92957", longitude: "151.76482"}
2: {machineName: "PC33", clientName: "The Client", latitude: "-32.92959", longitude: "151.76480"}
3: {machineName: "PC15", clientName: "The Client", latitude: "-32.92957", longitude: "151.76481"}
4: {machineName: "PC11", clientName: "The Client", latitude: "-32.75687", longitude: "151.62823"}
5: {machineName: "PC18", clientName: "The Client", latitude: "-32.92958", longitude: "151.76481"}
6: {machineName: "PC17", clientName: "The Client", latitude: "-32.92954", longitude: "151.76477"}
7: {machineName: "PC30", clientName: "The Client", latitude: "-32.92956", longitude: "151.76483"}

Function:

var map;
function initMap(locations) {
    map = new google.maps.Map(document.getElementById('tracker-map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
    });
    var infowindow =  new google.maps.InfoWindow({ content: '' });
    var markers = [];
    var longArr = [];
    var latArr = [];
    for (var i=0; i < locations.length; i++) {
        var latitude = locations[i].latitude, longitude = locations[i].longitude;
        if (!latArr.includes(latitude)) { latArr.push(latitude); }
        else {
            latitude = latitude+0.0005;
            latArr.push(latitude);
        }
        if (!longArr.includes(longitude)) { longArr.push(longitude); }
        else {
            longitude = longitude+0.0005;
            longArr.push(longitude);
        }
        var latLng = new google.maps.LatLng(latitude,longitude);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: locations[i].machineName + " :: " + locations[i].clientName,
        });
        bindInfoWindow(marker, map, infowindow, "<p>" + locations[i].machineName + " :: " + locations[i].clientName + "</p><br>" + latLng);
        markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers,{imagePath: 'https://.../'});
}

I need for the markers to not be right on top of each other.

If we add the following on click listener to our marker cluster:

google.maps.event.addListener(markerCluster, "click", function (c) {
    var m = c.getMarkers();
    var p = [];
    for (var i = 0; i < m.length; i++ ){
        p.push(m[i].getPosition());
    }
    console.log("Locations of managed markers: " + p.join(", "));
});

In our console the result is: Locations of managed markers: (-32.92957, 151.76482), (-32.92956, 151.76482999999996)

Answer 1

I resorted to using https://github.com/jawj/OverlappingMarkerSpiderfier

function initMap(locations) {
    map = new google.maps.Map(document.getElementById('tracker-map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
    });
    var markerSpiderfier = new OverlappingMarkerSpiderfier(map, {
        markersWontMove: true,
        markersWontHide: true,
        basicFormatEvents: true,
        keepSpiderfied: true,
    });
    var markers = [];
    for (var i=0; i < locations.length; i++) {
        var latitude = locations[i].latitude, longitude = locations[i].longitude;
        var latLng = new google.maps.LatLng(latitude,longitude);
        var titleHTML = 'title info here...';
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: titleHTML,
        });
        markers.push(marker);
        markerSpiderfier.addMarker(marker);
    }
    var iw =  new google.maps.InfoWindow({ content: '' });
    markerSpiderfier.addListener('click', function(marker, e) {
        iw.setContent(marker.title);
        iw.open(map, marker);
    });
    markerSpiderfier.addListener('spiderfy', function(markers) {
        iw.close();
    });
    var markerCluster = new MarkerClusterer(map, markers,{imagePath: '...'});
    markerCluster.setMaxZoom(15);
}