在纬度/经度值超过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);
}