我有一个名为“影响力”的圆圈,我想在圆圈的边缘创建一个标记。我想不出有什么办法可以做到这一点。
我的圈子是这样设置的 -
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/
如何向该圆的边缘添加新标记?
最佳答案
使用
- Math.random()* 360 获取随机标题
- 使用google.maps.Circle.getRadius获取圆的半径
- 使用google.maps.geometry.spherical.computeOffset计算圆上随机航向的点。注意:这需要 including the geometry library
- 将 map 变量设置为全局变量,以便一切正常
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>
关于javascript - 使用 jQuery/Javascript/GM 在圆的边缘创建标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17720237/