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

时间:2016-09-16 07:09:39

标签: javascript php google-maps

当我每1分钟加载地图时如何跟踪地图上的当前位置,但是现在每1分钟后地图位置重定向到默认位置。

这是我的code.i每1分钟调用一次加载函数,我从mapajax1.php文件中获取数据。我希望保留我在地图上的最后位置,因为我跟踪驱动程序

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

2 个答案:

答案 0 :(得分:0)

您应该为应用设置默认位置。你怎么用自己的位置? HTML5具有地理定位支持。这意味着现代浏览器可以通过您的IP地址找到您的位置。有关详细信息,请参阅此link。这是代码的基本代码段,它将在浏览器的开发控制台中显示您的坐标。

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

答案 1 :(得分:0)

在调用 load()功能之前,您需要保存地图上的最后位置。因此,你的代码每次都会返回初始位置。

这是一个示例代码,地图每5秒加载一次,地图上有最后一个位置。

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

创建地图时,添加一个侦听器以更新lat和lng

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