让谷歌地图标记实时工作答案

【问题标题】：Getting Google Map Marker To Work In Realtime让谷歌地图标记实时工作
【发布时间】：2017-09-11 21:35:21
【问题描述】：

我希望我的标记能够实时更新它们的位置 - 但这并不像最初看起来那么容易。希望大家能帮忙。

<?php

      $latitude="55.0567842";
      $longitude="-1.599155200000041";

      $name="Jim";
      $lat="55.0567842";
      $long="-1.599155200000041";

echo("

<!DOCTYPE html>
<html>
  <head>


    <style>

      #map {
        height: 100%;
      }

      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>



  </head>

  <body onload='refreshDiv()'>
    <div id='map'></div>");



     echo("
    <script>

    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: {lat: ".$latitude.", lng: ".$longitude."}
        });


// reloaded function every second    
     function refreshDiv()
     {
      setMarkers(map);
      var refresher = setTimeout('refreshDiv()', 1000);
     }

      }




      function setMarkers(map) {
      var beaches = [['".$name."', ".$lat.",".$long."],];
        // Adds markers to the map.

        // Marker sizes are expressed as a Size of X,Y where the origin of the image
        // (0,0) is located in the top left of the image.

        // Origins, anchor positions and coordinates of the marker increase in the X
        // direction to the right and in the Y direction down.
        var image = {
          url: '1.png',
          // This marker is 20 pixels wide by 32 pixels high.
          size: new google.maps.Size(20, 32),
          // The origin for this image is (0, 0).
          origin: new google.maps.Point(0, 0),
          // The anchor for this image is the base of the flagpole at (0, 32).
          anchor: new google.maps.Point(0, 32)
        };
        // Shapes define the clickable region of the icon. The type defines an HTML
        // <area> element 'poly' which traces out a polygon as a series of X,Y points.
        // The final coordinate closes the poly by connecting to the first coordinate.
        var shape = {
          coords: [1, 1, 1, 20, 18, 20, 18, 1],
          type: 'poly'
        };
        for (var i = 0; i < beaches.length; i++) {
          var beach = beaches[i];
          var marker = new google.maps.Marker({
            position: {lat: beach[1], lng: beach[2]},
            map: map,
            icon: image,
            shape: shape,
            title: beach[0],
            zIndex: beach[3]
          });
        }
      }
    </script>    ");


 echo("
    <script async defer
    src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBVQaENEYHY2g-mRhD6_tj1cSK8DhQoqHI&callback=initMap'>
    </script>

  </body>
</html>    ");
?>

正如我所说，问题可能在于 initMap()。有没有办法在加载 initMap() 后重新加载标记。

【问题讨论】：

标签： javascript html google-maps

【解决方案1】：

var markerStore = {}; // Variable Decleration for Storing Markers on First loop
// Generate map on Screen
    function myMap() {
        var latlng = new google.maps.LatLng(24.946218, 67.005615);
          var myOptions = {
              zoom: 10,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              mapTypeControl: false
          };

        map = new google.maps.Map(document.getElementById("map"),myOptions);
        var infowindow = new google.maps.InfoWindow(), marker, lat, lng;

//Update Markers on Map after interval
        setInterval(function (){
        //Get JSON from PHP MYSQL Data format will be in comments
          jQuery.getJSON('/cr/getloc.php', function(data){
            for( var n in data ){
                lat = data[ n ].lat;
                lng=data[ n ].lng;
                number=data[ n ].number;
                platenumber=data[ n ].platenumber;
                id=data[ n ].id;

           if(markerStore.hasOwnProperty(id)) {
                // Now this will just update markers only on map
                markerStore[id].setPosition(new google.maps.LatLng(lat,lng));
            } else {
                // First Draw Markers Then Update if MarkerStore has own Property as defined in bottom
                marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat,lng),
                name:platenumber,
                label:id,
                id:id,
                title:id,
                map: map,
            });

            google.maps.event.addListener( marker, 'click', function(e){
                infowindow.setContent( this.platenumber );
                infowindow.open( map, this );
            }.bind( marker ) );
                markerStore[id] = marker;
            }
            }

          });


         }, 6000);

来自 PHP 的 JSON 数据

[{"number":"+923333018444","platenumber":"KIG-5852","lat":"25.144211","lng":"67.125094","id":"1"},{ "数字":"+923323027999","车牌号":"KEI-4999","纬度":"25.006551","lng":"67.354573","id":"2"}]

【讨论】：

尝试了这段代码，但无法开始工作。你能帮忙吗？