Html 地理位置：只移动谷歌地图标记而不重新加载地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16222330/
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
Geolocation: moving only google maps marker without reload the map
提问by Francesc VE
I need to update only the marker when the device is moving or when the device is getting more accuracy. When the position change also reload the map and I need to move only the maker. I have the following code:
当设备移动或设备越来越准确时，我只需要更新标记。当位置改变时也会重新加载地图，我只需要移动制造商。我有以下代码：
if (navigator.geolocation) {
navigator.geolocation.watchPosition(
function(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 20,
center: coords,
streetViewControl: false,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var capa = document.getElementById("capa");
capa.innerHTML = "latitud: " + latitude + " longitud: " + " aquesta es la precisio en metres : " + accuracy;
map = new google.maps.Map(
document.getElementById("mapContainer"), mapOptions
);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "ok"
});
},function error(msg){alert('Please enable your GPS position future.');
}, {maximumAge:0, timeout:5000, enableHighAccuracy: false});
}else {
alert("Geolocation API is not supported in your browser.");
}
Thanks!
谢谢！
回答by Apostolos Emmanouilidis
I believe that the problem is that you create a new map inside the watchPosition function. You only need to create one marker and then update its position inside the watchPosition function.
我相信问题在于您在 watchPosition 函数中创建了一个新地图。您只需要创建一个标记，然后在 watchPosition 函数中更新其位置。
navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
}
Maybe this example will help you:
也许这个例子会帮助你：
<!doctype html>
<html lang="en">
<head>
<title>Google maps</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script type="text/javascript">
var map,
currentPositionMarker,
mapCenter = new google.maps.LatLng(40.700683, -73.925972),
map;
function initializeMap()
{
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 13,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
function locError(error) {
// the current position could not be located
alert("The current position could not be found!");
}
function setCurrentPosition(pos) {
currentPositionMarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Position"
});
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
}
function displayAndWatch(position) {
// set current position
setCurrentPosition(position);
// watch position
watchCurrentPosition();
}
function watchCurrentPosition() {
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
}
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
}
function initLocationProcedure() {
initializeMap();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
} else {
alert("Your browser does not support the Geolocation API");
}
}
$(document).ready(function() {
initLocationProcedure();
});
</script>
</head>
<body>
<div id="map_canvas" style="height:600px;"></div>
</body>
</html>
回答by amit
one easy way to do is, simply call map.clearOverlays();then read add new positions with map.addOverlay(<marker>)
一种简单的方法是，只需调用map.clearOverlays();然后读取添加新位置map.addOverlay(<marker>)
