特定の領域に同じマーカーを自動的に散布する方法

Question

私は現在、Googleマップで顧客のレビューを表示しているウェブページを構築しています。 1つの問題があり、それはすでに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>

等であってもよいです。