google maps javascript api Обновление маркеров - PullRequest
Новая
       2

google maps javascript api Обновление маркеров

0 голосов
/ 29 января 2019

Я использую API Google Maps для JavaScript и пишу код. В VB

Я получаю местоположения каждого маркера из базы данных MySQL, используя код VB, и помещаю их на свои карты Google, но я хочуобновлять расположение маркеров на картах, когда я обновляю данные базы данных, не обновляя веб-страницу, как я могу это сделать?СПАСИБО 

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

1 Ответ

0 голосов
/ 30 января 2019

Я думаю, что это решение поможет вам.

Самое главное, вы должны хранить массив маркеров с уникальным идентификатором.В моем случае я использовал его как 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;    
}

Когда ваши данные обновляются в БД, вы получите самые последние значения СПГ СПГ с идентификаторами.Таким образом, вы можете зациклить его и обновить, используя приведенный ниже код. 

myMarkers['ID_OF_MARKER'].setPosition(new google.maps.LatLng(newLat,newLng);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...