javascript - 如何在特定区域自动散布相同的标记

Question

我目前正在构建一个网页，用于在 Google map 上显示客户评论。有一个问题，那就是已经有超过 1200 条评论需要在 map 上显示，但这些评论只附加了一个城市，所以当我在 map 中加载所有这些评论时，其中很多评论都会分享完全相同的坐标。

我正在寻找一种在一定半径内分散相同标记的方法。因此，假设选取 map 上的每个标记并将它们沿随机方向移动 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>

该示例演示了如何在圆圈内随机绘制标记。