Google Maps API - 如何繪製第一個和最後一個標記

我正在使用Geolocation和Google Maps API創建一個跟蹤應用程序。目前它使用watchPosition()函數跟蹤用戶的位置。目前它每次接收到一個新的經度和緯度位置時繪製一個新的藍色圖標。不過，我只是希望它繪製起始位置（它已經是，使用紅色標記），然後在它接收最新座標時僅顯示藍色圖標，而不是每次都在地圖上放置藍色圖標它獲得了新的職位。Google Maps API - 如何繪製第一個和最後一個標記

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>

來源

2014-12-21 ifusion

能否請您解釋一下什麼叫最新立場是什麼意思？當你獲得新的座標時，用戶移動到新的位置不會成爲最新的位置？ – Chandru

是的，對不起，我會更好地解釋。有一個數組存儲每個新的經緯度和長的座標。例如[a，b，c，d，e，f，g]。目前它正在爲所收到的每一個這些符號繪製藍色圖標。但我只想使用陣列中的藍色圖標繪製地圖上的最後一個。例如在這個例子中「g」。希望有幫助嗎？ – ifusion

是的，這有幫助。如果我正確理解了你，在收到座標a，b，c，d，e，f，g之後，你會在視圖中看到7個藍色標記。不是嗎？如果是的話，你可以檢查https://developers.google.com/maps/documentation/javascript/examples/marker-remove刪除標記 – Chandru

移動結束標誌，如果它已經存在，而不是做一個新的每次。

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

來源

2014-12-21 13:33:55 geocodezip

謝謝，這是完美的:) – ifusion

Google Maps API - 如何繪製第一個和最後一個標記

回答

相關問題