谷歌地图API - 如何只绘制第一个和最后一个标记

Google Maps API - How to only plot the first and last marker

本文关键字：第一个 最后一个 绘制 API 谷歌地图      更新时间：2023-09-26

我正在使用Geolocation和Google Maps API来创建跟踪应用程序。目前，它使用watchPosition()功能跟踪用户的位置。目前，每当收到新的经度和纬度位置时，它都会绘制一个新的蓝色图标。但是，我只希望它绘制起始位置(它已经是，使用红色标记(，然后让它仅在收到最新坐标时显示蓝色图标，而不是每次收到新位置时都在地图上放置蓝色图标。

代码笔演示

法典： 

<!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'
  });
}

概念验证小提琴

相关文章：