javascript 刷新谷歌地图javascript ajax
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17474550/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
refresh google map javascript ajax
提问by rmalta
I am doing two html5/javascript apps with phonegap for android, and I have them both communicating through php with ajax, in both of them I am using the google maps api, and I need to know in both of them where the other guy is, while one is moving and another is waiting for him, then I have 2 questions:
我正在为 android 做两个带有 phonegap 的 html5/javascript 应用程序，我让它们都通过 php 和 ajax 进行通信，在这两个应用程序中我都使用谷歌地图 api，我需要知道另一个人在哪里，当一个在移动，另一个在等他时，我有两个问题：
In app1(the one that is moving), I need to refresh the marker every 10 seconds on the map, without loading the whole page.
I am loading through ajax, the coordinates that are saved in the mysql database for both apps, so I need to set a second marker in each map, as the other apps location, and track it's movements every 10 seconds.
在 app1（正在移动的那个）中，我需要在地图上每 10 秒刷新一次标记，而不加载整个页面。
我正在通过 ajax 加载两个应用程序的 mysql 数据库中保存的坐标，因此我需要在每个地图中设置第二个标记，作为其他应用程序的位置，并每 10 秒跟踪一次它的移动。
This is how I am loading the map in each app:
这是我在每个应用程序中加载地图的方式：
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);
}
And I am getting the location of the other app with an ajax POST:
我通过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);
}
});
What can I do to solve my problems? I have tried to refresh the map in different functions, and tried to load only the marker, but it doesn't work. Also the exact api I am using is:
我能做些什么来解决我的问题？我尝试在不同的功能中刷新地图，并尝试仅加载标记，但它不起作用。我正在使用的确切 api 是：
http://maps.googleapis.com/maps/api/js?sensor=false
SOLVED IT: The answer is to split the code in different functions and call only the marker, in order to update it:
已解决：答案是将代码拆分为不同的函数并仅调用标记，以便对其进行更新：
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);
}
回答by Jamie Starke
In an effort to make it easier to find, here is the solution to the question.
为了更容易找到，这里是问题的解决方案。
The answer is to split the code in different functions and call only the marker, in order to update it:
答案是将代码拆分为不同的函数并仅调用标记，以便对其进行更新：
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);
}
