[英]Show radius circle on click - Google Maps
I am trying to add a radius circle around a marker on click.我试图在点击时在标记周围添加一个半径圆。 I can get the circle to appear without any issues.
我能得到圈内没有出现任何问题。 I have put the circle within it's own function and then attached it to a click event.
我已经把圆它自己的函数中,然后将其连接到一个点击事件。 For some reason it does not seem to work though.
出于某种原因,它似乎没有工作,虽然。 Can anyone shine any light on the situation please?
任何人都可以照到任何光线的情况好吗?
JSFiddle DEMO http://jsfiddle.net/yV6xv/3729/的jsfiddle DEMO http://jsfiddle.net/yV6xv/3729/
var circle, map;
function initialize()
{
var centerLatlng = new google.maps.LatLng(38.061067,-104.414062);
map = new google.maps.Map(document.getElementById('map'), {
'zoom': 6,
'center': centerLatlng,
'mapTypeId': google.maps.MapTypeId.ROADMAP
});
// Marker Icons Implementation
markers = new google.maps.Marker({
position: centerLatlng,
map: map,
title: 'Center of Map'
});
// Add click event listenecal
calcRadius(60000);
};
function calcRadius(radiusVal)
{
//console.log(document.getElementById("#radioBtn1").value);
google.maps.event.addListener(map, "click", function () {
circle = new google.maps.Circle({
map: map
radius : 9000,
strokeColor : '#BBD8E9',
strokeWeight : 2
});
console.log(circle);
circle.bindTo('center', marker, 'position');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Add the click listener to the marker.将单击侦听器添加到标记。
Code:代码:
var circle, map;
function initialize()
{
var centerLatlng = new google.maps.LatLng(38.061067,-104.414062);
map = new google.maps.Map(document.getElementById('map'), {
'zoom': 6,
'center': centerLatlng,
'mapTypeId': google.maps.MapTypeId.ROADMAP
});
// Marker Icons Implementation
markers = new google.maps.Marker({
position: centerLatlng,
map: map,
title: 'Center of Map'
});
// Add click event listenecal
calcRadius(markers, map, 60000);
};
function calcRadius(marker, map, radiusVal)
{
//console.log(document.getElementById("#radioBtn1").value);
google.maps.event.addListener(marker, "click", function () {
circle = new google.maps.Circle({
map: map,
fillColor : '#BBD8E9',
fillOpacity : 0.3,
radius : radiusVal,
strokeColor : '#BBD8E9',
strokeOpacity : 0.9,
strokeWeight : 2
});
// console.log(circle);
circle.bindTo('center', marker, 'position');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.