在标记点击时切换圆圈 [英] Toggling circle on marker click
本文介绍了在标记点击时切换圆圈的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一些标记是通过一系列绳索放置的。围绕这些标记我有半径圆圈。我试图只显示相关标记点击时的圆圈，然后在信息框关闭时隐藏。无论标记是否被点击，现在圆圈都会显示。我不确定我做错了什么。有人可以提供一些有关我忽略的内容的见解吗？
- 感谢
函数初始化（）{
var locations = [
['Siren 1'，32.832，-96.629，1]，
['Siren 2'，32.827，-96.644，2]，
['Siren 3'，
['Siren 4'，32.809，-96.658，4]，
['Siren 5'，32.805，-96.634，5]，
['32.824，-96.612，3] Siren 6'，32.809，-96.614，6]，
['Siren 7'，0，-0,7]，
['Siren 8'，0，-0,8]，
['Siren 9'，32.794，-96.613，9]，
['Siren 10'，32.776，-96.61，10]，
['Siren 11'，32.761，-96.633，11 ]，
['Siren 12'，32.764，-96.598,12]，
['Siren 13'，32.773，-96.581,13]，
['Siren 14'，32.748，
['Siren 15'，0，-0,15]，
['Siren 16'，32.751，-96.576,16]，
['Siren 17' '，32.75，-96.55，17]，
['Siren 18'，0，-0,18]，
['Siren 19'，32.728，-96.583，19]，
['Siren 20'，32.741，-96.566,20]，
['Siren 21'，32.738，-96.545,21]，
['Siren 22'，32.722，-96.537,22]，
['Siren 23'，32.708，-96.558,23]，
['Siren 24'，32.696，-96.499，24]，
['Siren 25'，32.694，-96.564 ，25]
];
var mapOptions = {
center：new google.maps.LatLng（32.782878，-96.609862），
panControl：false，
zoom：11 ，
mapTypeControl：true，
mapTypeControlOptions：{
style：google.maps.MapTypeControlStyle.DROPDOWN_MENU
}，
zoomControl：true，
zoomControlOptions：{
style：google.maps.ZoomControlStyle.SMALL，
position：google.maps.ControlPosition.RIGHT_TOP
}，
mapTypeId：google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map（document.getElementById（map），
mapOptions）;
函数MyLogoControl（controlDiv）{
controlDiv.style.padding ='5px';
var logo = document.createElement（'IMG'）;
logo.src ='images / watermark_MW_GMap.png';
logo.style.cursor ='指针';
controlDiv.appendChild（logo）;
google.maps.event.addDomListener（logo，'click'，function（）{
window.location ='http://www.mesquiteweather.net';
}）;
}
var logoControlDiv = document.createElement（'DIV'）;
var logoControl = new MyLogoControl（logoControlDiv）;
logoControlDiv.index = 0; //用于订购
map.controls [google.maps.ControlPosition.TOP_LEFT] .push（logoControlDiv）;
var infowindow = new google.maps.InfoWindow（）;
var marker，i;
var image ='http://maps.google.com/intl/en_us/mapfiles/ms/micons/green.png';
（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps.LatLng （地点[i] [1]，地点[i] [2]），
地图：地图，
图标：图片
}）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
infowindow.setContent（locations [i ] [b]）;
infowindow.open（map，marker）;
}
}）（marker，i））;
//添加圈子叠加并绑定到标记
var circle = new google.maps.Circle（{
map：map，
radius：4828，//米
strokeColor：'＃FF0000'，
strokeOpacity：0.8，
strokeWeight：2，
fillColor：'＃FF0000'，
fillOpacity：0.35，
}）;
circle.bindTo（'center'，marker，'position'）;
$ b
解决方案
以下是你描述的内容：我知道你只需要在任何特定时间显示一个圈子。如果不是这种情况，请发表评论，我会尽我所能纠正。
for（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps.LatLng（locations [i] [1]，locations [i ] [2]），
map：map，
icon：image
}）;
var openCircle; //声明圆圈
google.maps.event.addListener（marker，'click'，（function（marker，i））{
return function（）{
infowindow。 setContent（locations [i] [0]）;
infowindow.open（map，marker）;
if（openCircle！== undefined）{
openCircle.setMap（null ）;
}
openCircle = new google.maps.Circle（{
map：map，
radius：4828，// meters
strokeColor： '＃FF0000'，
strokeOpacity：0.8，
strokeWeight：2，
fillColor：'＃FF0000'，
fillOpacity：0.35，
}）;
openCircle.bindTo（'center'，marker，'position'）;
google.maps.event.addListener（infowindow，'closeclick'，function（）{
openCircle.setMap（null）;
}）;
}
}）（marker，i））;
//删除以下
$ b $ * / $
var circle = new google.maps.Circle（{
map：map，
半径：4828，//米
strokeColor：'＃FF0000'，
strokeOpacity：0.8，
strokeWeight：2，
fillColor：'＃FF0000'，
fillOpacity ：0.35，
}）;
circle.bindTo（'center'，marker，'position'）;
* /
}
I have some markers that are placed via an array of cords. Around these markers I have radius circles. I am trying to only display the circles when the associated marker is clicked and then hide when the infobox is closed. Right now the circles display regardless if the marker is clicked or not. I am not sure what I am doing wrong. Could someone offer some insight as to what I am overlooking?
-Thanks
function initialize() {
var locations = [
['Siren 1', 32.832, -96.629, 1],
['Siren 2', 32.827, -96.644, 2],
['Siren 3', 32.824, -96.612, 3],
['Siren 4', 32.809, -96.658, 4],
['Siren 5', 32.805, -96.634, 5],
['Siren 6', 32.809, -96.614, 6],
['Siren 7', 0, -0, 7],
['Siren 8', 0, -0, 8],
['Siren 9', 32.794, -96.613, 9],
['Siren 10', 32.776, -96.61, 10],
['Siren 11', 32.761, -96.633, 11],
['Siren 12', 32.764, -96.598, 12],
['Siren 13', 32.773, -96.581, 13],
['Siren 14', 32.748, -96.614, 14],
['Siren 15', 0, -0, 15],
['Siren 16', 32.751, -96.576, 16],
['Siren 17', 32.75, -96.55, 17],
['Siren 18', 0, -0, 18],
['Siren 19', 32.728, -96.583, 19],
['Siren 20', 32.741, -96.566, 20],
['Siren 21', 32.738, -96.545, 21],
['Siren 22', 32.722, -96.537, 22],
['Siren 23', 32.708, -96.558, 23],
['Siren 24', 32.696, -96.499, 24],
['Siren 25', 32.694, -96.564, 25]
];
var mapOptions = {
center: new google.maps.LatLng(32.782878, -96.609862),
panControl: false,
zoom: 11,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
function MyLogoControl(controlDiv) {
controlDiv.style.padding = '5px';
var logo = document.createElement('IMG');
logo.src = 'images/watermark_MW_GMap.png';
logo.style.cursor = 'pointer';
controlDiv.appendChild(logo);
google.maps.event.addDomListener(logo, 'click', function() {
window.location = 'http://www.mesquiteweather.net';
});
}
var logoControlDiv = document.createElement('DIV');
var logoControl = new MyLogoControl(logoControlDiv);
logoControlDiv.index = 0; // used for ordering
map.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var image = 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green.png';
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 4828, // metres
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
});
circle.bindTo('center', marker, 'position');
}
}
解决方案
The following does what you describe: I understood you only want one circle showing at any given time. If that's not the case please comment and I will do my best to rectify.
Click here for the jsFiddle Demo
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image
});
var openCircle; // declare the circle
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
if (openCircle !== undefined) {
openCircle.setMap(null);
}
openCircle = new google.maps.Circle({
map: map,
radius: 4828, // metres
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
});
openCircle.bindTo('center', marker, 'position');
google.maps.event.addListener(infowindow,'closeclick',function(){
openCircle.setMap(null);
});
}
})(marker, i));
// remove what's below
/*
var circle = new google.maps.Circle({
map: map,
radius: 4828, // metres
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
});
circle.bindTo('center', marker, 'position');
*/
}
这篇关于在标记点击时切换圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
