javascript - 刷新谷歌地图javascript ajax

Question

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

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

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

这就是我在每个应用程序中加载 map 的方式:

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

我能做些什么来解决我的问题？我尝试在不同的函数中刷新 map ，并尝试只加载标记，但它不起作用。 我正在使用的确切 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);
}