google maps javascript api更新标记

Question

i'm using google maps api for javascript and I write code In VB 我正在使用javascript的google maps api并在VB中编写代码

I get the locations of each marker from MySQL data base using vb code and I put them on my google maps but I want to update the location of the markers on the maps as i'm updating my data base data without refreshing the web page how can I do that? 我使用vb代码从MySQL数据库中获取每个标记的位置，并将它们放在Google地图上，但是我想在不更新网页的情况下更新数据库数据时更新标记在地图上的位置我能做到吗？ THANKS 谢谢

 @code Dim conn As New MySql.Data.MySqlClient.MySqlConnection("SERVER = localhost;DATABASE = mydb;USER=root;PASSWORD=pass") If conn.State = False Then conn.Open() End If Dim comm As New MySql.Data.MySqlClient.MySqlCommand("Select `Driver ID`,DriverLat,DriverLng From DriverDetails", conn) Dim reader As MySql.Data.MySqlClient.MySqlDataReader = comm.ExecuteReader Dim dt As New Data.DataTable Dim DriverLat As New List(Of Integer) Dim DriverLng As New List(Of Integer) Dim DriverID As New List(Of Integer) dt.Load(reader) For i = 0 To dt.Rows.Count - 1 DriverID.Add(CInt(dt.Rows(i)(0))) DriverLat.Add(CInt(dt.Rows(i)(1))) DriverLng.Add(CInt(dt.Rows(i)(2))) Next MsgBox(DriverID(0)) MsgBox(DriverLat(0)) MsgBox(DriverLng(0)) 'IT GIVES ME A LIST OF ALL OF THE DRIVERS ID , DRIVERS LNG AND DRIVER LAT,SO I HAVE TO USE THEM 'IN MY MAP FOR THE MARKERS AND THE TITLE OF THE MARKERS WOULD BE DRIVERS ID' End Code <!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 1000px; width: 1000px; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <img STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:50px; HEIGHT:50px" src="~/Resources/slide2.jpg"> <div id="map"></div> <script> function initMap() { var map = new google.maps.Map (document.getElementById('map'), { center: { lat: 12.13, lng: 12.13 }, zoom: 1 }); var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z"; var Caricon = { path: car, scale: 1, strokeColor: 'white', strokeWeight: .10, fillOpacity: 1, fillColor: '#FFFFFF' }; @For i = 0 To DriverID.Count - 1 @:var @CStr("marker" & i) = new google.maps.Marker({ @: position: {lat: @CInt(DriverLat.Item (i)), lng: @CInt(DriverLng.Item(i))}, @: icon: Caricon, @: map: map, @: animation: google.maps.Animation.DROP @:}); Next i } </script> <script src="https://maps.googleapis.com/maps/api/js?key=MY-APY-KEY&callback=initMap" Async defer></script> </body> </html>

Answer 1

I think this solution will help you. 我认为此解决方案将为您提供帮助。

Most important thing is you should keep an array of markers with unique identifier. 最重要的是，您应该保留带有唯一标识符的标记数组。 In my case I used it as Id. 就我而言，我将其用作ID。 So creating the map will be like below. 因此，创建地图将如下所示。

 var myMarkers = new Array(); for (index in markers) { myMarker[ markers[index]['id'] ] = addMarker(map, markers[index]); } function addMarker(map, data) { //create the markers var marker = new google.maps.Marker({ position: new google.maps.LatLng(data.lat, data.lng), map: map, title: data.id, icon: image, shape: shape, shadow: shadow }); //create the info windows var content = document.createElement("DIV"); var title = document.createElement("DIV"); title.innerHTML = data.id; content.appendChild(title); var infowindow = new google.maps.InfoWindow({ content: content }); // Open the infowindow on marker click google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); }); return marker; }

When your data updated in DB, you will get the latest LAT LNG values alone with IDs. 在数据库中更新数据时，您将单独获得最新的LAT LNG值和ID。 So you can loop it and update using below code. 因此，您可以循环播放并使用以下代码进行更新。

 myMarkers['ID_OF_MARKER'].setPosition(new google.maps.LatLng(newLat,newLng);

google maps javascript api更新标记

问题描述

1 个解决方案

解决方案1
0 2019-01-30 10:33:09

google maps javascript api更新标记

问题描述

1 个解决方案

解决方案1 0 2019-01-30 10:33:09

解决方案1
0 2019-01-30 10:33:09