我正在尝试创建一个网站,允许我点击地图上的标记,然后会出现一个圆圈突出显示该区域。我已将其编码为有效,但是,我不能删除不同于infowindow的圆圈。我希望有一个删除圈子按钮,可能会删除地图中的所有圈子(如果地图上显示多个圈子),例如https://developers.google.com/maps/documentation/javascript/examples/polyline-remove中的删除按钮。如果没有,可能在点击另一个标记时使圆消失。
另外,当用户垃圾邮件时,如何防止圈子变得更不透明?
这是我的代码:
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(37.09024, -95.712891),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
setMarkers(map, atm);
}
var atm = [
['<h1 class="big">newyork</h1>',40.714352, -74.005973,2],
['<h1 class="big">losangeles</h1>',34.052234, -118.243684,1],
['<h1 class="big">vancouver</h1>',49.25, -123.1,3],
];
var infowindow = new google.maps.InfoWindow({
maxWidth: 200
});
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var atms = locations[i];
var myLatLng = new google.maps.LatLng(atms[1], atms[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: atms[0],
zIndex: atms[3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var myCity = new google.maps.Circle({
center:new google.maps.LatLng(locations[i][1], locations[i][2]),
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.3
});
myCity.setMap(map)
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
希望像
这样的功能function removeLine() {
flightPath.setMap(null);
}
允许我创建
<input onclick="removeLine();" type=button value="Remove line">
答案 0 :(得分:0)
您可以使用this
范围将标记的圆圈添加为自身的属性。
然后,您只需检索标记及其圆圈,然后将其从地图中删除即可。同样,这样每个标记只会绘制一个圆圈,并阻止每个标记添加多个圆圈。
markerCircles = [];
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(37.09024, -95.712891),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapCanvas, mapOptions);
setMarkers(map, atm);
}
var atm = [
['<h1 class="big">newyork</h1>', 40.714352, -74.005973, 2],
['<h1 class="big">losangeles</h1>', 34.052234, -118.243684, 1],
['<h1 class="big">vancouver</h1>', 49.25, -123.1, 3], ];
var infowindow = new google.maps.InfoWindow({
maxWidth: 200
});
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var atms = locations[i];
var myLatLng = new google.maps.LatLng(atms[1], atms[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
markerDataIndex: i,
circle: false,
title: atms[0],
zIndex: atms[3]
});
google.maps.event.addListener(marker, 'click', function (marker, i) {
console.log(this.markerDataIndex);
infowindow.setContent(atm[this.markerDataIndex][0]);
infowindow.open(map, this);
if (!this.circle) {
var myCity = new google.maps.Circle({
center: new google.maps.LatLng(atm[this.markerDataIndex][1], atm[this.markerDataIndex][2]),
radius: 20000,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.3
});
myCity.setMap(map);
markerCircles.push(this);
this.circle = myCity;
}
});
}
}
window.removeCircles = function () {
markerCircles.forEach(function (marker, index, circleArray) {
console.log(marker);
marker.circle.setMap(null);
marker.circle = false;
});
markerCircles = [];
}
google.maps.event.addDomListener(window, 'load', initialize);
答案 1 :(得分:0)
问题是你的圈子是你标记的点击事件处理程序的局部变量。
我说你的标记数组是一个全局变量。创建圆时,将其设置为标记上的属性。
对于每个删除按钮,传递一个ID,该ID将按钮与您要删除的标记圈子相关联。类似的东西:
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(37.09024, -95.712891),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
setMarkers(map, atm);
}
var markers = [];
var atm = [
['<h1 class="big">newyork</h1>', 40.714352, -74.005973, 2],
['<h1 class="big">losangeles</h1>', 34.052234, -118.243684, 1],
['<h1 class="big">vancouver</h1>', 49.25, -123.1, 3],
];
var infowindow = new google.maps.InfoWindow({
maxWidth: 200
});
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var atms = locations[i];
var myLatLng = new google.maps.LatLng(atms[1], atms[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: atms[0],
zIndex: atms[3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
var myCity = new google.maps.Circle({
center: new google.maps.LatLng(locations[i][1], locations[i][2]),
radius: 20000,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.3,
map: map
});
marker.set("circle", myCity);
}
})(marker, i));
markers.push(marker);
}
}
function removeLine(marker) {
markers[marker].circle.setMap(null);
}
然后(实际上你可能会使用JS循环遍历atm
数组来输出这些数据):
<input onclick="removeLine(0);" type=button value="Remove line 1">
<input onclick="removeLine(1);" type=button value="Remove line 2">
<input onclick="removeLine(2);" type=button value="Remove line 3">