刷新谷歌地图javascript ajax

Question

我正在做两个带有 phonegap for android 的 html5/javascript 应用程序，我让它们都通过 php 和 ajax 进行通信，在它们中我都使用 google maps api，我需要知道它们在哪里另一个人是，一个人在移动，另一个人在等他，那么我有两个问题：

1. 在app1（正在移动的那个）中，我需要在地图上每10秒刷新一次标记，而不是加载整个页面。

2. 我正在通过 ajax 加载，这是两个应用程序保存在 mysql 数据库中的坐标，因此我需要在每个地图中设置第二个标记，作为其他应用程序的位置，并每 10 秒跟踪一次它的运动.

这就是我在每个应用程序中加载地图的方式：

  function getPos() {
         navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true});
         setTimeout(getPos, 10000); //call function after 10 seconds
 }

 function onSuccess(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    console.log("Found - LAT: ", lat, "LON: ", lon);

    var currentposition = new google.maps.LatLng(lat,lon);
    var mapoptions = {
        zoom: 16,
        center: currentposition,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        icon: image
    };
    var map = new google.maps.Map(document.getElementById("map"), mapoptions);
    var marker = new google.maps.Marker({
        position: currentposition,
        map: map
    });
    save_position_in_bd();
}

function onError(error) {
   console.log('code: '    + error.code, 'message: ' + error.message);
}

我正在使用 ajax POST 获取另一个应用程序的位置：

$.ajax({ 
   type: "POST", 
   url: "http://localhost/call.php", 
   data: "name=rui",
   dataType: 'json',
   success: function(data){
     lat = data.lat;//get other apps lat
     lon = data.lon;//get other apps lon
   },
   error: function(jqXHR, textStatus, errorThrown ){
         console.log("POST: ", jqXHR, textStatus, errorThrown);
   }
 });

我可以做些什么来解决我的问题？我尝试用不同的功能刷新地图，并尝试仅加载标记，但它不起作用。 我正在使用的确切 api 是：

http://maps.googleapis.com/maps/api/js?sensor=false 

解决了： 答案是将代码拆分为不同的函数，只调用标记，以便对其进行更新：

function getPos() {//initial function to read the position
         estado = "livre";
         navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true});
         setTimeout(keep_alive, 10000); //read every 10 seconds
 }

 function onSuccess(position) {//read map and mark it in the map
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    console.log("Found - LAT: ", lat, "LON: ", lon);

    var image = '/img/taxi_green.png';
    var mapoptions = {
        zoom: 16,
        center: new google.maps.LatLng(lat,lon),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        icon: image
    };
    map = new google.maps.Map(document.getElementById("map"), mapoptions);
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lon),
        map: map
    });
    save_position();
}

function keep_alive() {//read position and mark it in the map
   navigator.geolocation.getCurrentPosition(onRefresh, onError, {enableHighAccuracy:true});
   save_position();
   setTimeout(keep_alive, 10000); //read every 10 seconds   
}

//refresh only the marker
function onRefresh(position) {
   lat = position.coords.latitude;
   lon = position.coords.longitude;

   console.log("Found - LAT: ", lat, "LON: ", lon);

   marker.setPosition(new google.maps.LatLng(lat, lon));//refresh marker
   map.setCenter(new google.maps.LatLng(lat, lon));//resfresh center of the map
}

function trace_client() {//mark clients position in the map
   //clientMarker.setPosition(new google.maps.LatLng(client_lat, client_lon));
   clientMarker = new google.maps.Marker({
        position: new google.maps.LatLng(client_lat,client_lon),
        map: map
    });
   console.log("client marked in the map");
}

function onError(error) {
   console.log('code: '    + error.code, 'message: ' + error.message);
}

Answer 1

为了更容易找到，这里是问题的解决方案。

答案是将代码拆分为不同的函数，只调用标记，以便更新它：

function getPos() {//initial function to read the position
         estado = "livre";
         navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true});
         setTimeout(keep_alive, 10000); //read every 10 seconds
 }

 function onSuccess(position) {//read map and mark it in the map
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    console.log("Found - LAT: ", lat, "LON: ", lon);

    var image = '/img/taxi_green.png';
    var mapoptions = {
        zoom: 16,
        center: new google.maps.LatLng(lat,lon),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        icon: image
    };
    map = new google.maps.Map(document.getElementById("map"), mapoptions);
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lon),
        map: map
    });
    save_position();
}

function keep_alive() {//read position and mark it in the map
   navigator.geolocation.getCurrentPosition(onRefresh, onError, {enableHighAccuracy:true});
   save_position();
   setTimeout(keep_alive, 10000); //read every 10 seconds   
}

//refresh only the marker
function onRefresh(position) {
   lat = position.coords.latitude;
   lon = position.coords.longitude;

   console.log("Found - LAT: ", lat, "LON: ", lon);

   marker.setPosition(new google.maps.LatLng(lat, lon));//refresh marker
   map.setCenter(new google.maps.LatLng(lat, lon));//resfresh center of the map
}

function trace_client() {//mark clients position in the map
   //clientMarker.setPosition(new google.maps.LatLng(client_lat, client_lon));
   clientMarker = new google.maps.Marker({
        position: new google.maps.LatLng(client_lat,client_lon),
        map: map
    });
   console.log("client marked in the map");
}

function onError(error) {
   console.log('code: '    + error.code, 'message: ' + error.message);
}