Los círculos aún se muestran después del círculo.setmap (null) Mapa de Google JavaScript API -- javascript campo con google-maps campo con google-maps-api-3 campo con google-maps-markers camp Relacionados El problema

Circles still display after circle.setMap(null) Google Map Javascript API


0
vote

problema

Español

Intenté eliminar todos los círculos y marcadores cuando se enciende el evento de zoomin / zoout. Empujé cada marcador y círculos para el bucle como

  gmarkers.push(new google.maps.Circle(circle)); // For Circles gmlist.push(marker); // For Marker   

y trató de eliminar cuando quiero aclarar como

  function ClearMapMaker() {             console.log(gmlist);              for (i = 0; i < gmlist.length; i++) {                  gmlist[i].setMap(null);             }             gmlist = [];             console.log(gmarkers);             for (i = 0; i < gmarkers.length; i++) {                 gmarkers[i].setMap(null);             }         }   

Se eliminan los marcadores, pero los círculos no lo son. ¿Cómo puedo eliminar los círculos en el mapa? Aquí está mi código completo. Gracias.

  public static Result createEntry() {     Form<BlogEntry> filledForm = blogEntryForm.bindFromRequest();     if (filledForm.hasErrors()) {         Logger.debug(filledForm.data().toString());         Logger.debug(filledForm.errors().toString());         return badRequest(newentry.render(filledForm));     }     BlogEntry entry = filledForm.get();     entry.save();     return redirect(routes.BlogController.index()); }  public static Result newEntry() {     return ok(newentry.render(blogEntryForm)); } 0  
Original en ingles

I tried to remove all circles and markers when ZoomIn/ZoomOut event is fired. i pushed every marker and circles in For Loop like as

gmarkers.push(new google.maps.Circle(circle)); // For Circles gmlist.push(marker); // For Marker 

and tried to remove when I want to clear like as

function ClearMapMaker() {             console.log(gmlist);              for (i = 0; i < gmlist.length; i++) {                  gmlist[i].setMap(null);             }             gmlist = [];             console.log(gmarkers);             for (i = 0; i < gmarkers.length; i++) {                 gmarkers[i].setMap(null);             }         } 

markers are removed but circles are not. How can I remove circles on Map? Here is my full code. Thank you.

    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCbhHXN1r0QOFwUrQSbsd0JDbRVHmEDKTM"></script> <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script> <script>     var gmarkers = [];     var gmlist = [];     var fill_color_val = '#3888ff';     var labelText = "1";     var currentZoom = 0;     $(function () {         function initialize_map() {             var mapProp = {                 minZoom: 11,                 maxZoom: 20,                 center: new google.maps.LatLng(16.7803886, 96.1844148),                 zoom: 11,                 mapTypeId: google.maps.MapTypeId.ROADMAP             };             map = new google.maps.Map(document.getElementById("map"), mapProp);             bindMarkerOnMap("level_0");         }          initialize_map();          map.addListener('zoom_changed', function () {             //currentZoom = map.getZoom();             //if (currentZoom <= 12) {             //    ClearMapMaker();             //    console.log(map.getZoom());             //    bindMarkerOnMap("level_0");             //} else if (currentZoom >= 13) {             //    console.log("level_1 fired + " + currentZoom);             //    ClearMapMaker()             //    console.log(map.getZoom());             //    bindMarkerOnMap("level_1");             //}else if (currentZoom >= 15) {             //    bindMarkerOnMap("level_2");             //}             ClearMapMaker();         });      });      function bindMarkerOnMap(level) {         console.log(level);         if (level == "level_0") {             console.log("level_0 binding");             for (var i = 0; i < data.length; i++) {                 var latlng = new google.maps.LatLng(data[i].Lat, data[i].Long);                  var myOptions = {                     content: labelText,                     boxStyle: {                         border: "none",                         textAlign: "center",                         fontSize: "10pt",                         width: "50px"                     },                     disableAutoPan: true,                     pixelOffset: new google.maps.Size(-25, -5),                     position: latlng,                     closeBoxURL: "",                     isHidden: false,                     pane: "floatPane",                     enableEventPropagation: true                 };                  // Add circle overlay and bind to marker                 var circle = new google.maps.Circle({                     map: map,                     radius: 1600, // 10 miles in metres                     fillColor: fill_color_val,                     strokeColor: '#69DAED',                     strokeWeight: 2,                     fillOpacity: 1,                 });                  var marker = new google.maps.Marker({                     position: latlng,                     title: data[i].Author,                     draggable: false,                     map: map                 });                 marker.setVisible(true);                  circle.bindTo('center', marker, 'position');                  google.maps.event.addListener(circle, 'click', getInfoCallback(map, latlng));                  myOptions.content = data[i].Count;                 var ibLabel = new InfoBox(myOptions);                 ibLabel.open(map);                 gmarkers.push(new google.maps.Circle(circle));                 gmlist.push(marker);             }         } else if (level == "level_1") {             console.log("level_1 binding");             for (var i = 0; i < datadetail.length; i++) {                 var latlng = new google.maps.LatLng(datadetail[i].Lat, datadetail[i].Long);                  var myOptions = {                     content: labelText,                     boxStyle: {                         border: "none",                         textAlign: "center",                         fontSize: "10pt",                         width: "50px"                     },                     disableAutoPan: true,                     pixelOffset: new google.maps.Size(-25, -5),                     position: latlng,                     closeBoxURL: "",                     isHidden: false,                     pane: "floatPane",                     enableEventPropagation: true                 };                  // Add circle overlay and bind to marker                 var circle = new google.maps.Circle({                     map: map,                     radius: 800,                      fillColor: fill_color_val,                     strokeColor: '#69DAED',                     strokeWeight: 2,                     fillOpacity: 1,                 });                  var marker = new google.maps.Marker({                     position: latlng,                     title: datadetail[i].Author,                     draggable: false,                     map: map                 });                 marker.setVisible(false);                  circle.bindTo('center', marker, 'position');                  google.maps.event.addListener(circle, 'click', getInfoCallback(map, latlng));                  myOptions.content = datadetail[i].Count;                 var ibLabel = new InfoBox(myOptions);                 ibLabel.open(map);                 gmarkers.push(new google.maps.Circle(circle)); // For Circles                 gmlist.push(marker); // For Marker             }          }     }         function getInfoCallback(map, latlng) {             return function () {                 map.setZoom(15);                 map.setCenter(latlng);             };         }          var data = [             { Id: 1, Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!", Lat: 16.7803886, Long: 96.1844148, Count: 250 },             { Id: 2, Author: "Pete Hunt", Text: "This is one comment", Lat: 16.9234506, Long: 96.1357186, Count: 5 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 17.120420, Long: 96.069629, Count: 10 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.908606, Long: 96.0619453, Count: 80 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.916317, Long: 96.274875, Count: 70 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9870346, Long: 96.0644941, Count: 60 },         ];          var datadetail = [             { Id: 1, Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!", Lat: 16.7803986, Long: 96.1844148, Count: 115 },             { Id: 2, Author: "Pete Hunt", Text: "This is one comment", Lat: 16.9236506, Long: 96.1357186, Count: 51 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 17.100420, Long: 96.069629, Count: 120 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.963606, Long: 96.0689453, Count: 870 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.916987, Long: 96.254875, Count: 780 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9877846, Long: 96.0643941, Count: 660 },             { Id: 1, Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!", Lat: 16.7723886, Long: 96.1844148, Count: 350 },             { Id: 2, Author: "Pete Hunt", Text: "This is one comment", Lat: 16.9344506, Long: 96.1357186, Count: 55 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 17.100420, Long: 96.069629, Count: 177 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.900606, Long: 96.0619453, Count: 25 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.919617, Long: 96.274875, Count: 57 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9877546, Long: 96.0644941, Count: 78 },             { Id: 1, Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!", Lat: 16.7864886, Long: 96.1844148, Count: 32 },             { Id: 2, Author: "Pete Hunt", Text: "This is one comment", Lat: 16.9238506, Long: 96.1388186, Count: 45 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 17.120420, Long: 96.096629, Count: 78 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.908646, Long: 96.0779453, Count: 34 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.922317, Long: 96.288875, Count: 12 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9827346, Long: 96.0699941, Count: 29 },             { Id: 1, Author: "Daniel Lo Nigro", Text: "Hello ReactJS.NET World!", Lat: 16.7807186, Long: 96.1840148, Count: 9 },             { Id: 2, Author: "Pete Hunt", Text: "This is one comment", Lat: 16.9263506, Long: 96.1342186, Count: 85 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 17.120420, Long: 96.064549, Count: 75 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9043606, Long: 96.06299453, Count: 63 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.915817, Long: 96.277875, Count: 19 },             { Id: 3, Author: "Jordan Walke", Text: "This is *another* comment", Lat: 16.9870876, Long: 96.0864941, Count: 72 },         ];            //Clear map makers on google map         function ClearMapMaker() {             console.log(gmlist);              for (i = 0; i < gmlist.length; i++) {                  gmlist[i].setMap(null);             }             gmlist = [];             console.log(gmarkers);             for (i = 0; i < gmarkers.length; i++) {                 gmarkers[i].setMap(null);             }         } </script> } 
           

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

Estás creando los círculos dos veces:

aquí:

  AppConfigService8  

y aquí:

  AppConfigService9  

Solo cambia esta última línea para esto:

  APP_INITIALIZER0  
 

You are creating the circles twice:

Here:

var circle = new google.maps.Circle({     map: map,     radius: 1600, // 10 miles in metres     fillColor: fill_color_val,     strokeColor: '#69DAED',     strokeWeight: 2,     fillOpacity: 1, }); 

and here:

gmarkers.push(new google.maps.Circle(circle)); 

Just change this last line for this:

gmarkers.push(circle); 
 
 

Relacionados problema

8  Google Maps API V3 - Múltiples puntos con la animación  ( Google maps api v3 multiple points with animation ) 
Estoy construyendo un directorio de miembros que, además de listar a los miembros, ya sea en orden de nombre y la distancia de una ciudad o ciudad, se mostrar...

0  KML Polígonos y marcadores juntos  ( Kml polygons and markers together ) 
He establecido un Mapa API V3 con Mis polígonos (archivo KML), pero ahora me gustaría poner los marcadores en el mismo mapa. Los marcadores (Lat, Lang) vienen...

119  Google Map API V3: Cómo agregar datos personalizados a los marcadores  ( Google map api v3 how to add custom data to markers ) 
Hay una forma en que puedo agregar información personalizada a mis marcadores para su uso posterior. Hay formas de tener una ventana de información y un títul...

2  ¿Por qué mi marcador de Google no aparece?  ( Why is my google marker not showing up ) 
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script> <script> var myCenter = n...

0  ¿Cómo mostrar el contenido en un Infowindow específico para un marcador?  ( How to display content in an infowindow specific to a marker ) 
He creado un Google Maps (API V3) con el número de marcadores según los resultados de búsqueda. Cuando hago clic en un marcador, se abre un Infowindow. ¿Cuál ...

0  Cómo agregar marcador en el mapa por doble toque y obtenga las coordenadas [Android]  ( How to add marker on map by double tap and get the coordinates android ) 
Quiero agregar marcador en Google Map by Double Tap. Sé de googlemap.onmapclicklistener pero agrega un marcador en un solo toque. He encontrado una publicac...

1  Google Maps v3: actualizando marcadores periódicamente  ( Google maps v3 updating markers periodically ) 
He seguido el tutorial PHP / MySQL en Google Maps encontrado aquí . Me gustaría que los marcadores sean actualizados desde la base de datos cada 5 segund...

1  Marcador de Google Maps con imagen dinámica dentro del marcador  ( Google maps marker with dynamic image inside marker ) 
Estoy tratando de agregar una imagen dentro de un marcador de Google Maps (no hay ventana de información). Esencialmente, quiero un avatar como el marcador, p...

42  Cómo mover un marcador en la API de Google Maps  ( How to move a marker in google maps api ) 
Estoy usando el API V3 de Google Maps y estoy tratando de hacer que un marcador se mueva a través de la pantalla. Esto es lo que tengo: $12 Ahora, lo qu...

-1  MarkerClusterPlus y clusters anidados  ( Markerclustererplus and nested clusters ) 
Qué quiero hacer es lo siguiente: Supongamos que tiene en un área determinada una serie de estaciones de recepción de transmisión (Pilones) (5, por ejemplo), ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos