Добавление кнопки удаления круга

Question

Я пытаюсь создать веб-сайт, который позволяет мне щелкнуть маркеры на карте, и появится круг, выделяющий область. Я закодировал его для работы, но, однако, я не могу удалить круг в отличие от 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"> 

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); 

Demo http://jsfiddle.net/robschmuecker/1pry2gwj/

Answer 2

Проблема заключается в вашем круг является локальным переменным для обработчика событий нажмите ваши маркеров.

Я бы сказал, что ваш массив маркеров является глобальной переменной. Когда вы создаете круг, установите его как свойство на маркере.

Для каждой кнопки удаления передайте идентификатор, который связывает кнопку с маркером, круг которого вы хотите удалить. Что-то вроде:

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">