Google Maps API - 如何仅绘制第一个和最后一个标记答案

【问题标题】：Google Maps API - How to only plot the first and last markerGoogle Maps API - 如何仅绘制第一个和最后一个标记
【发布时间】：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>

标签： javascript google-maps google-maps-api-3 geolocation

【解决方案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

【讨论】：

谢谢，太好了:)