使用jQuery / Javascript / GM在圆的边缘创建一个标记 [英] Create a marker on the edge of a circle using jQuery/Javascript/GM

问题描述

我有一个叫做影响力的圆圈，我想在圆圈的边缘创建一个标记。我想不出有什么办法。

我的圈子是这样设置的 -

  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/

我如何在此圈子的边缘添加新的标记？ 解决方案

使用

1. Math.random（）* 360获取随机标题


2. google.maps.Circle.getRadius 获取圆的半径


3. 使用 google.maps.geometry.spherical。 computeOffset 来计算圆上随机标题上的点。请注意：这需要包括几何图库


4. 让您的地图变量全局性地运行，以便它能够正常工作

updated fiddle

  function addInfluence（latlng）{
 you =新的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（））; 
} 
  

I have a circle called "influence", I want to create a marker on the edge of the circle. I can't think of any way of doing it.

My circle is setup like this -

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);

How would I create a marker on the edge of that circle?

Update: http://jsfiddle.net/jArU2/4/

How would I add a new marker to the edge of this circle?

解决方案

Use

1. Math.random()* 360 to get a random heading
2. Use google.maps.Circle.getRadius to get the radius of the circle
3. Use google.maps.geometry.spherical.computeOffset to compute a point at the random heading on the circle. Note: this requires including the geometry library
4. Make your map variable global so it all works

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());
}

这篇关于使用jQuery / Javascript / GM在圆的边缘创建一个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！