在緯度/經度值超過5位小數的Google地圖上移動標記

Question

我將一些標記從JSON數組放置到地圖上，一些標記具有相同的經度和緯度，因此我嘗試將其偏移0.00005。 這適用於大多數標記，但是似乎有些標記不想讓步，我只能將其放到小於5個小數位的坐標上，而當我加法時，它不能正確計算。

我嘗試為每個緯度解析parfFloat（latitude）.toFixed（5），對於經度也一樣，但是當添加到地圖時，它似乎仍具有額外的小數位。

JSON數組：

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"}

功能：

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://.../'});
}

我需要標記不能彼此重疊。

如果我們在點擊監聽器上將以下內容添加到標記群集中：

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(", "));
});

在我們的控制台中，結果為： Locations of managed markers: (-32.92957, 151.76482), (-32.92956, 151.76482999999996)

Answer 1

我訴諸於使用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);
}