我正在使用 Geolocation 和 Google Maps API 创建跟踪应用。目前，它使用 watchPosition() 函数跟踪用户位置。目前，每次收到新的经度和纬度位置时，它都会绘制一个新的蓝色图标。但是我只是希望它绘制起始位置(它已经是，使用红色标记。)，然后让它在收到最新坐标时仅显示蓝色图标，而不是每次都在 map 上放置蓝色图标它获得了一个新的位置。
代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
width: 100%;
}
</style>
<div id="dvContent">
</div>
<div id="map_canvas">
Hello
</div>
<!-- <input type="text" name="'adr" id="address" value="-41.2889, 174.7772" />
<input type="button" value="Start Watching" id="start">
<input type="button" value="Stop Watching" id="stop">
<input type="button" value="Delete Markers" id="delete"> -->
<script type="text/javascript">
var watchID = null;
var geo;
var map;
var startMarker = []; // Red Icon
var endMarker = []; // Blue Icon
var geo_options = {
enableHighAccuracy: true,
maximumAge : 10000000,
timeout : 20000
};
var pathLineArray = new Array();
var mypath;
var geocoder;
var mapMarkerRevCode;
console.log(startMarker);
$(document).ready(function(){
function getGeoLocation(){
if (navigator.geolocation) {
return navigator.geolocation;
} else {
return "undefined";
}
}
function startWatching(){
watchID = geo.watchPosition(show_coords, geo_error, geo_options);
// watchID = geo.getCurrentPosition(show_coords, geo_error, geo_options);
}
function stopWatching(){
if (watchID!=null) {
geo.clearWatch(watchID);
}
}
$('#start').click(startWatching);
$('#stop').click(stopWatching);
if(geo = getGeoLocation()){
startWatching();
} else {
alert('Geolocation is not supported');
}
});
function show_coords(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var latlng = new google.maps.LatLng(lat, lon);
if (map) {
// Makes it so that it doesnt have to reload the map everytime, it just pans to the new position
map.panTo(latlng);
} else {
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var mypath = new google.maps.Polyline({
path: pathLineArray,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
startMarker = new google.maps.Marker({
position: latlng,
map: map,
});
}
// Push lat and long coords to this array
pathLineArray.push(latlng);
if (mypath) {
mypath.setPath(pathLineArray);
} else {
mypath = new google.maps.Polyline({
path: pathLineArray,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 4,
map: map,
});
}
endMarker = new google.maps.Marker({
position: latlng,
map: map,
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
}
function geo_error(error){
switch(error.code){
case error.TIMEOUT:
alert("geolocation timeout");
break;
case error.POSITION_UNAVAILABLE:
alert("Gelocation position unavailable");
break;
case error.PERMISSION_DENIED:
alert("Permission denied");
break;
default:
alert('Unknown error');
}
}
</script>
</body>
</html>
最佳答案
如果结束标记已存在，则将其移动，而不是每次都创建一个新的。
if (endMarker && endMarker.setPosition) {
endMarker.setPosition(latlng);
} else {
endMarker = new google.maps.Marker({
position: latlng,
map: map,
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
}
关于javascript - Google Maps API - 如何仅绘制第一个和最后一个标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27587555/