Google Maps API - 如何仅绘制第一个和最后一个标记
Posted
技术标签:
【中文标题】Google Maps API - 如何仅绘制第一个和最后一个标记【英文标题】：Google Maps API - How to only plot the first and last marker 【发布时间】：2014-12-21 07:36:42 【问题描述】：我正在使用Geolocation 和 Google Maps API 创建一个跟踪应用程序。目前它使用watchPosition() 函数跟踪用户的位置。它目前每次收到新的经度和纬度位置时都会绘制一个新的蓝色图标。但是我只希望它绘制开始位置（它已经是，使用红色标记。）然后让它只在收到最新坐标时显示蓝色图标，而不是每次都在地图上放置一个蓝色图标它获得了一个新位置。
CodePen Demo
代码：
<!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>
【问题讨论】：
您能解释一下您所说的最新职位是什么意思吗？当用户移动到新位置时，您获得新坐标时不会是最新位置？ 是的，对不起，我会解释得更好。有一个数组存储接收到的每个新的经纬度坐标。例如 [a,b,c,d,e,f,g]。目前，它正在为收到的每一个坐标绘制一个蓝色图标。但我只希望使用该数组中的蓝色图标在地图上绘制最后一个。例如，在本例中为“g”。希望有帮助吗？ 是的，这有帮助。如果我理解正确，在收到坐标 a、b、c、d、e、f、g 后，您会在视图中看到 7 个蓝色标记。不是吗？如果是，您可以检查developers.google.com/maps/documentation/javascript/examples/… 以删除标记span> 【参考方案1】：如果结束标记已经存在，则移动它，而不是每次都新建一个。
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'
);
proof of concept fiddle
【讨论】：
谢谢，太好了:)以上是关于Google Maps API - 如何仅绘制第一个和最后一个标记的主要内容，如果未能解决你的问题，请参考以下文章
google maps API v3 - 如何绘制动态多边形/折线？
如何使用 JavaScript 在 Google Maps API 中仅获取一个标记
如何使用 Google MAps API v2 围绕引脚绘制圆圈