javascript - 使用 jQuery/Javascript/GM 在圆的边缘创建标记

Question

我有一个名为“影响力”的圆圈，我想在圆圈的边缘创建一个标记。我想不出有什么办法可以做到这一点。

我的圈子是这样设置的 -

var influenceOptions = {
    strokeColor: "#00CC00",
    strokeOpacity: 0.7,
    strokeWeight: 0.5,
    fillColor: "#00CC00",
    fillOpacity: 0.35,
    map: map,
    center: latlng,
    radius: 30
};
influence = new google.maps.Circle(influenceOptions);

如何在该圆上的随机点创建标记？

更新:http://jsfiddle.net/jArU2/4/

如何向该圆的边缘添加新标记？

Answer 1

使用

1. Math.random()* 360 获取随机标题
2. 使用google.maps.Circle.getRadius获取圆的半径
3. 使用google.maps.geometry.spherical.computeOffset计算圆上随机航向的点。注意:这需要 including the geometry library
4. 将 map 变量设置为全局变量，以便一切正常

updated fiddle

function addInfluence(latlng){
    you = new google.maps.Marker({
                                 map: map,
                                 position: latlng,
                                 });
    
    var influenceOptions = {
      strokeColor: "#00CC00",
      strokeOpacity: 0.7,
      strokeWeight: 0.5,
      fillColor: "#00CC00",
      fillOpacity: 0.35,
      map: map,
      center: latlng,
      radius: 3000
    };
    influence = new google.maps.Circle(influenceOptions);
    var bearing = Math.random()*360;
    var newPoint = google.maps.geometry.spherical.computeOffset(latlng,influence.getRadius(), bearing);
    var marker2 = new google.maps.Marker({map:map, position:newPoint});
    map.fitBounds(influence.getBounds());
}

代码片段:

var map;
jQuery(document).ready(function() {
  var latlng = new google.maps.LatLng(40.747688, -74.004142);

  var options = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map($('#map')[0], options);

  addInfluence(latlng);
});

function addInfluence(latlng) {
  you = new google.maps.Marker({
    map: map,
    position: latlng,
  });

  var influenceOptions = {
    strokeColor: "#00CC00",
    strokeOpacity: 0.7,
    strokeWeight: 0.5,
    fillColor: "#00CC00",
    fillOpacity: 0.35,
    map: map,
    center: latlng,
    radius: 3000
  };
  influence = new google.maps.Circle(influenceOptions);
  var bearing = Math.random() * 360;
  var newPoint = google.maps.geometry.spherical.computeOffset(latlng, influence.getRadius(), bearing);
  var marker2 = new google.maps.Marker({
    map: map,
    position: newPoint
  });
  map.fitBounds(influence.getBounds());
}

#map {
  height: 100%;
  width: 100%;
}

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>

<div id="map"></div>