如何在每1分钟加载后保持我在地图中的最后位置

Question

how to track the current position on map when i load map at every 1 min but right now map position redirect to default position after every 1 min.

here is my code.i call load function at every 1 min and i fetch data from mapajax1.php file.i want to stay my last position on map because i track the driver

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
    <script type="text/javascript">
     function load() {

          var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng("<?php echo $lat;?>", "<?php echo $lng;?>"),
            zoom: 5,
            mapTypeId: 'roadmap'
          });
          var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP file
          downloadUrl("mapajax1.php", function(data) {
            var xml = data.responseXML;


            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
              var name = markers[i].getAttribute("name");
              var email = markers[i].getAttribute("email");
              var phone = markers[i].getAttribute("phone");
              var status = markers[i].getAttribute("status");
              var type = markers[i].getAttribute("type");
              var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              var html = "<b>" + name + "</b> <br/>" + email+ "</b> <br/>" + phone+ "</b> <br/>" + status;
              var icon = customIcons[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon
              });
              bindInfoWindow(marker, map, infoWindow, html);
            }
          });
        }

     setInterval(function(){ 
                load()    
            }, 60000);
    </script>

Answer 1

You should set a default location for your app. How about you use your own location? HTML5 has geolocation support. This means modern browsers can find your location by your IP address. See this link for detailed information. This is the basic snippet of code which will display your coordinates in the dev console of your browser.

var lat = null;
var lng = null;

// sets your location as default
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var locationMarker = null;
    if (locationMarker){
      // return if there is a locationMarker bug
      return;
    }

    lat = position.coords["latitude"];
    lng = position.coords["longitude"];

   console.log(lat, lng);

  },
  function(error) {
    console.log("Error: ", error);
  },
  {
    enableHighAccuracy: true
  }
  );
}

Answer 2

You need to save the last position on the map before calling load() function. your code returns to initial position every time because of that.

here is a sample code, the map is loaded every 5 seconds with the last postion on the map.

jsfiddle link

var lat = -27.4; //<?php echo $lat;?>
var lng = 153.023; //<?php echo $lng;?>

function load() {

  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(lat, lng),
    zoom: 5,
    mapTypeId: 'roadmap'
  });
  //....... rest of code
  map.addListener('center_changed', function() {
    lat = map.getCenter().lat();
    lng = map.getCenter().lng();
  });
}

setInterval(function() {
  load()
}, 5000);

When creating the map, add a listener to update the lat and lng

  map.addListener('center_changed', function() {
    lat = map.getCenter().lat();
    lng = map.getCenter().lng();
  });