谷歌地图 javascript api 更新标记答案

【问题标题】：google maps javascript api Updating Markers谷歌地图 javascript api 更新标记
【发布时间】：2019-01-30 18:33:09
【问题描述】：

我正在使用 google maps api for javascript，我在 VB 中编写代码

我使用 vb 代码从 MySQL 数据库中获取每个标记的位置，并将它们放在我的谷歌地图上但我想更新地图上标记的位置，因为我正在更新我的数据库数据而不刷新网页我怎样才能做到这一点？谢谢

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

【问题讨论】：

如果您需要更新现有标记，您必须将它们存储在一些 javascript 数组中，并在您知道位置已更改时更新（或删除/添加）。我希望更新代码作为来自同一页面的一些 Ajax 被调用。

标签： javascript html vb.net visual-studio google-maps

【解决方案1】：

我认为这个解决方案会对您有所帮助。

最重要的是您应该保留一组具有唯一标识符的标记。就我而言，我将其用作 ID。所以创建地图将如下所示。

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

当您在 DB 中更新数据时，您将单独获得最新的 LAT LNG 值和 ID。所以你可以使用下面的代码循环和更新。

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

【讨论】：