2013-05-22 81 views
3

我想捕捉到最近的道路的座標。但我仍然無法以簡單的方式做到這一點。 這是簡單的代碼,如何提高它那結果將是在道路上的標記:
谷歌地圖API - 捕捉標記到最近的道路

<!DOCTYPE html> 
<html> 
<head> 
<title>Map</title> 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
html { height: 100% } 
body { height: 100%; margin: 0; padding: 0 } 
#map_canvas { height: 300px; width:600px } 
</style> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 
    function initialize() { 
     var homeLatlng = new google.maps.LatLng(24.696554,-81.328238); 

     var myOptions = { 
      zoom: 15, 
      center: homeLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     var image = new google.maps.MarkerImage(
      'http://maps.google.com/mapfiles/ms/micons/green-dot.png', 
      new google.maps.Size(32, 32), // size 
      new google.maps.Point(0,0), // origin 
      new google.maps.Point(16, 32) // anchor 
     ); 

     var shadow = new google.maps.MarkerImage(
      'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png', 
      new google.maps.Size(59, 32), // size 
      new google.maps.Point(0,0), // origin 
      new google.maps.Point(16, 32) // anchor 
     ); 

     var homeMarker = new google.maps.Marker({ 
      position: homeLatlng, 
      map: map, 
      title: "Check this cool location", 
      icon: image, 
      shadow: shadow 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body> 
    <div id="map_canvas"></div> 
</body> 
</html> 

我想獲得的最簡單的方法思路。 感謝您的幫助。

回答

4

使用路線服務。從興趣點到興趣點獲取行車路線。應該在路上。

var directionsService = new google.maps.DirectionsService(); 

directionsService.route({origin:homeLatlng, destination:homeLatlng, travelMode: google.maps.DirectionsTravelMode.DRIVING}, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) 
    { 
    var homeMarker = new google.maps.Marker({ 
     position: response.routes[0].legs[0].start_location, 
     map: map, 
     title: "Check this cool location", 
     icon: image, 
     shadow: shadow 
    }); 
    } else { 
    var homeMarker = new google.maps.Marker({ 
     position: homeLatlng, 
     map: map, 
     title: "Check this cool location", 
     icon: image, 
     shadow: shadow 
    }); 
    } 
}); 

example

+0

這將是與代碼示例有用的解釋。 – wahas

+0

我想我仍然在做錯事。沒有顯示.. – wahas

+0

與實例相比。 – geocodezip