No se pueden actualizar las imágenes del icono dinámicamente después de actualizar los datos por cada X segundos -- javascript campo con angular campo con google-maps campo con google-maps-api-3 camp Relacionados El problema

Unable to update the icon images dynamically after refresh of the data for every x seconds


2
vote

problema

Español

Actualmente estoy actualizando los marcadores de forma dinámica por cada X segundos aquí, la actualización de los datos y la colocación de los marcadores, pero aquí el problema es cuando los datos se actualizan de acuerdo con las imágenes del icono no se están actualizando aquí. PUBLO

  0== red 1== green 2== orange   here this.markerIcon = this.mapData[i].OrderState;  this is my icon color status    

a continuación es mi código que está obteniendo los datos dinámicos

  if(this.mapData!=null && this.mapData.length>0){            for (var i = 0; i < this.mapData.length;i++){             this.latlng = {lat: parseFloat(this.mapData[i].latitude), lng: parseFloat(this.mapData[i].longitude)};              this.markerName = this.mapData[i].Name;               this.markerIcon = this.mapData[i].OrderState;              if (this.markerStore.hasOwnProperty(this.mapData[i].DriverId)) {                if (this.markerIcon === "0") {                 this.iconDisplay = this.red;                } else if (this.markerIcon === "1") {                 this.iconDisplay = this.green;                } else if ( this.markerIcon === "2") {                 this.iconDisplay = this.orange;               } else if (this.markerIcon === "3") {                 this.iconDisplay = this.building;               }               this.markerStore[this.mapData[i].DriverId].setPosition(this.latlng);             } else {               if (this.markerIcon === "0") {                 this.iconDisplay = this.red;                } else if (this.markerIcon === "1") {                 this.iconDisplay = this.green;                } else if ( this.markerIcon === "2") {                 this.iconDisplay = this.orange;               } else if (this.markerIcon === "3") {                 this.iconDisplay = this.building;               }                var marker = new google.maps.Marker({                 position: this.latlng,                 map:this.mapObject,                 icon:this.iconDisplay               });               this.markerStore[this.mapData[i].DriverId] = marker;             }           }         }        }      });   

y cuando presiono la página de recuento, entonces el cambio de color del color está sucediendo, no sé lo que está mal

Datos JSON:

  { "Data": [ { "DriverId": "138", "Name": "A", "OrderState": "1", "latitude": "35.20714666666667", "longitude": "55.32000000001" }, { "DriverId": "4", "Name": "T", "OrderState": "2", "latitude": "35.7828333333337", "longitude": "58.764833333334" }, { "DriverId": "7", "Name": "AL", "OrderState": "2", "latitude": "35.677546666666665", "longitude": "85.27641833333334" }, { "DriverId": "111", "Name": "Waseem.", "OrderState": "0", "latitude": "25.199691666666663", "longitude": "55.249858333333336" }, { "DriverId": "5", "Name": "D", "OrderState": "0", "latitude": "35.19730666666667", "longitude": "65.56744999999999" }, { "DriverId": "137", "Name": "G", "OrderState": "1", "latitude": "36.240411666666667", "longitude": "65.27219333333334" } ], "ErrorCode": "201 - Success", "Message": "Success", "Status": true }   

Aquí basado en el valor del estado del pedido Im Changin la imagen del marcador 0 == rojo y 1 == verde y 2 == naranja cada 10 segundos se actualizarán los datos y 0 pueden convertirse en 1 o 2 también

Original en ingles

i am currently updating the markers dynamically for every x seconds here the data updating and placing the markers but here the issue is when ever the data is update according to the icon images are not updating here i place

0== red 1== green 2== orange   here this.markerIcon = this.mapData[i].OrderState;  this is my icon color status  

below is my code which is getting the dynamic data

if(this.mapData!=null && this.mapData.length>0){            for (var i = 0; i < this.mapData.length;i++){             this.latlng = {lat: parseFloat(this.mapData[i].latitude), lng: parseFloat(this.mapData[i].longitude)};              this.markerName = this.mapData[i].Name;               this.markerIcon = this.mapData[i].OrderState;              if (this.markerStore.hasOwnProperty(this.mapData[i].DriverId)) {                if (this.markerIcon === "0") {                 this.iconDisplay = this.red;                } else if (this.markerIcon === "1") {                 this.iconDisplay = this.green;                } else if ( this.markerIcon === "2") {                 this.iconDisplay = this.orange;               } else if (this.markerIcon === "3") {                 this.iconDisplay = this.building;               }               this.markerStore[this.mapData[i].DriverId].setPosition(this.latlng);             } else {               if (this.markerIcon === "0") {                 this.iconDisplay = this.red;                } else if (this.markerIcon === "1") {                 this.iconDisplay = this.green;                } else if ( this.markerIcon === "2") {                 this.iconDisplay = this.orange;               } else if (this.markerIcon === "3") {                 this.iconDisplay = this.building;               }                var marker = new google.maps.Marker({                 position: this.latlng,                 map:this.mapObject,                 icon:this.iconDisplay               });               this.markerStore[this.mapData[i].DriverId] = marker;             }           }         }        }      }); 

and when i press reload page then the icon color change is happening i don't know what's wrong

Json data:

{ "Data": [ { "DriverId": "138", "Name": "A", "OrderState": "1", "latitude": "35.20714666666667", "longitude": "55.32000000001" }, { "DriverId": "4", "Name": "T", "OrderState": "2", "latitude": "35.7828333333337", "longitude": "58.764833333334" }, { "DriverId": "7", "Name": "AL", "OrderState": "2", "latitude": "35.677546666666665", "longitude": "85.27641833333334" }, { "DriverId": "111", "Name": "Waseem.", "OrderState": "0", "latitude": "25.199691666666663", "longitude": "55.249858333333336" }, { "DriverId": "5", "Name": "D", "OrderState": "0", "latitude": "35.19730666666667", "longitude": "65.56744999999999" }, { "DriverId": "137", "Name": "G", "OrderState": "1", "latitude": "36.240411666666667", "longitude": "65.27219333333334" } ], "ErrorCode": "201 - Success", "Message": "Success", "Status": true } 

here based on order state value im changin the marker image 0 == red and 1 == green and 2 == orange every 10 seconds the data will be updated and 0 may become 1 or 2 also

           
         
         

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

Si el marcador existe en lugar de reemplazar el elemento en la matriz, retire el marcador antiguo y agregue uno nuevo.

  if (this.mapData[i].DriverId in this.markerStore) {      this.markerStore[this.mapData[i].DriverId].setMap(null); } // create here the new one as you did before   
 

If the marker exists instead of replacing element in the array remove the old marker and add a new one.

if (this.mapData[i].DriverId in this.markerStore) {      this.markerStore[this.mapData[i].DriverId].setMap(null); } // create here the new one as you did before 
 
 

Relacionados problema

1  Encuentre el lugar de Google Place API con la distancia entre el lugar actual y el lugar cercano con la clasificación  ( Google place api find nearby place with distance between current place and nearb ) 
Estoy tratando de encontrar lugares cercanos y calcular la distancia desde el lugar actual a los lugares cercanos y luego quiero mostrar todos los lugares en ...

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

4  Vuelva a crear el mapa de la Directiva de AngularJS de Google Map  ( Re create the map by angularjs directive of google map ) 
Estoy usando el tema cuadrado de angularjs y usando su directiva de mapa para generar el mapa como este: vagrant up4 Esto está en la página de búsqueda ...

25  Mapa Enrutamiento, A LA Google Maps?  ( Map routing a la google maps ) 
Siempre he estado intrigado por el enrutamiento del mapa, ¡pero nunca he encontrado buenos tutoriales de nivel de introducción (o incluso avanzados!) En él. ¿...

3  Ventana de información de Google Maps V3 bajo marcadores Z-index  ( Google maps v3 info window under markers z index ) 
Estamos usando marcadores e inquietud en Google Maps V3 en http://www.stolencamerafinder.com/ lostandfound.jsp . La mayoría de las veces, la Infowindow apa...

-1  Eliminar todos los marcadores, polígonos y oyentes de eventos de un mapa de Google  ( Remove all markers polygons and event listeners from a google map ) 
Tengo un mapa de Google creado con Google Maps API 3 que tiene varios marcadores, polígonos y oyentes de eventos. Cuando presiono un botón, quiero retirar tod...

9  FullScreencontrol y mantenimiento del centro de mapas  ( Fullscreencontrol and maintaining map center ) 
Actualmente, parece que si tengo un puerto de visualización de mapas de google de tamaño modesto (300px por 300px) con FullScreencontontrol habilitado, y me e...

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

144  Google Maps V3 - Cómo calcular el nivel de zoom para un límite dado  ( Google maps v3 how to calculate the zoom level for a given bounds ) 
Estoy buscando una forma de calcular el nivel de zoom para obtener límites dados con la API de Google Maps V3, similar a getBoundsZoomLevel() en la API v2. ...

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




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