如何在特定區域自動分散相同的標記

Question

我目前正在構建一個顯示Google地圖上的客戶評論的網頁。有一個問題，那就是已經有超過1200條評論需要在地圖上顯示，但這些評論只有一個城市附屬於他們，因此當我在地圖中加載所有這些評論時，他們中的很多人都會分享完全相同的座標。

我正在尋找一種方法來分散一定半徑內的相同標記。因此，可以說選擇地圖上的每一個標記，並隨意移動它們1％，以創建它們之間的距離。

我真的不介意這樣做是通過javascript還是PHP來實現的，或者是使用設置新座標的算法預先設置標記。

Answer 1

可能是這樣的

function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 5, 
 
    center: { lat: -25.363, lng: 131.044 } 
 
    }); 
 

 
    var originalMarker = new google.maps.Marker({ 
 
    position: { lat: -25.363, lng: 131.044 }, 
 
    map: map, 
 
    title: '' 
 
    }); 
 

 
    google.maps.event.addListenerOnce(map, 'idle', function() { 
 

 
    var circle = new google.maps.Circle({ 
 
     map: map, 
 
     radius: 1000 * 1000, //in metres 
 
     fillColor: '#AA0000' 
 
    }); 
 
    circle.bindTo('center', originalMarker, 'position'); 
 

 
    drawMarkersInCircle(circle, 200); 
 
    }); 
 

 
} 
 

 

 
function drawMarkersInCircle(circle, count) { 
 
    var map = circle.getMap(); 
 
    var proj = map.getProjection(); 
 
    var centerPoint = proj.fromLatLngToPoint(circle.getCenter()); 
 
    var radius = Math.abs(proj.fromLatLngToPoint(circle.getBounds().getNorthEast()).x - centerPoint.x); 
 

 
    for (var i = 0; i < count; i++) { 
 
    var point = createRandomPointInCircle(centerPoint, radius); 
 
    var pos = proj.fromPointToLatLng(point); 
 
    //console.log(point); 
 

 
    var marker = new google.maps.Marker({ 
 
     position: pos, 
 
     map: map, 
 
     title: '' 
 
    }); 
 
    } 
 
} 
 

 

 
function createRandomPointInCircle(centerPoint, radius) { 
 
    var angle = Math.random() * Math.PI * 2; 
 
    var x = (Math.cos(angle) * getRandomArbitrary(0, radius)) + centerPoint.x; 
 
    var y = (Math.sin(angle) * getRandomArbitrary(0, radius)) + centerPoint.y; 
 
    return new google.maps.Point(x, y); 
 
} 
 

 

 
function getRandomArbitrary(min, max) { 
 
    return Math.random() * (max - min) + min; 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initMap);

html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #map { 
 
     height: 100%; 
 
     }

<script src="http://maps.googleapis.com/maps/api/js?key=&sensor=false"></script> 
 
<div id="map"></div>

的例子演示瞭如何隨意畫一個圓內的標記。