添加删除圆圈按钮

Question

我正在尝试创建一个网站，允许我单击地图上的标记，然后会出现一个突出显示该区域的圆圈。我已经对其进行了编码，但是与信息窗口不同，我无法删除圆圈。我希望有一个删除圆圈按钮，可以删除地图中的所有圆圈（如果地图上显示多个圆圈），就像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">

Answer 1

您可以使用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);

演示http://jsfiddle.net/robschmuecker/1pry2gwj/

Answer 2

问题是您的圈子是标记的单击事件处理程序的局部变量。

我想说让你的标记数组成为一个全局变量。创建圆圈时，将其设置为标记上的属性。

对于每个删除按钮，传递一个 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">