Google地理位置和方向API

如何將Google地理定位和方向API結合起來，以便當您單擊地理位置標記和任何一個標記（其中硬編碼了座標）時，它將顯示兩者之間的方向。Google地理位置和方向API

地理位置代碼

<script type="text/javascript"> 
    function initialize() { 
    var locations = [ 
    ['Hougang', 1.37265, 103.893658], 
    ['Punggol', 1.400617, 103.907833], 
    ['MacRitchie Reservoir', 1.346002, 103.825436], 
    ['Bishan', 1.352051, 103.849125], 
    ['Sentosa', 1.251226, 103.830757] 
    ]; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: new google.maps.LatLng(1.37265, 103.893658), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var infowindow = new google.maps.InfoWindow(); 
    var marker, i; 
    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
     }); 
     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 
    } 
    // Check if user support geo-location 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
     var latitude = position.coords.latitude; 
     var longitude = position.coords.longitude; 
     var geolocpoint = new google.maps.LatLng(latitude, longitude); 
     var mapOptions = { 
      zoom: 8, 
      center: geolocpoint, 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     } 
     // Place a marker 
     var geolocation = new google.maps.Marker({ 
      position: geolocpoint, 
      map: map, 
      title: 'Your geolocation', 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png' 
     }); 
     }); 
    } 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script>

來源

2012-08-05 Challenger

值得一提的是，地理位置API並非來自谷歌，但HTML5的一部分，因而主要來自瀏覽器。因此所有現代瀏覽器都支持它。 IE只在IE 9中引入它 – 2012-08-05 12:47:19

添加點擊監聽器標記。
執行時，按下陣列上當前標記的位置。
如果數組的長度爲2，請將具有這兩個位置的路線服務作爲起點和終點。

與this example類似，但不是「地圖」點擊偵聽器，而是使用「標記」點擊偵聽器。

您確實說過要強制第一次點擊位於地理位置標記上，您需要編寫代碼來檢查標記的位置並驗證它是否爲地理位置標記，如果您想這樣做。我認爲讓用戶點擊其中一個目標標記會更簡單，然後從地理標記生成方向（您需要保留一個特殊的參考）。從例如

Example that assumes the start is the geolocation point

代碼片段：

var geolocation = null; 
 
    var ren = null; 
 

 
    function initialize() { 
 

 
    var locations = [ 
 
     ['Hougang', 1.37265, 103.893658], 
 
     ['Punggol', 1.400617, 103.907833], 
 
     ['MacRitchie Reservoir', 1.346002, 103.825436], 
 
     ['Bishan', 1.352051, 103.849125], 
 
     ['Sentosa', 1.251226, 103.830757] 
 
    ]; 
 

 
    var map = new google.maps.Map(document.getElementById('map_canvas'), { 
 
     zoom: 13, 
 
     center: new google.maps.LatLng(1.37265, 103.893658), 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    var marker, i; 
 

 
    // Place a marker 
 
    geolocation = new google.maps.Marker({ 
 
     position: map.getCenter(), 
 
     map: map, 
 
     title: 'Your geolocation', 
 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png' 
 
    }); 
 

 

 
    for (i = 0; i < locations.length; i++) { 
 
     marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
     map: map 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
      infowindow.setContent(locations[i][0]); 
 
      infowindow.open(map, marker); 
 
      if (ren && ren.getMap()) ren.setMap(null); 
 
      ren = new google.maps.DirectionsRenderer({ 
 
      'draggable': true 
 
      }); 
 
      ren.setMap(map); 
 
      ren.setPanel(document.getElementById("directionsPanel")); 
 
      ser = new google.maps.DirectionsService(); 
 

 
      //Cria a rota, o DirectionTravelMode pode ser: DRIVING, WALKING, BICYCLING ou TRANSIT 
 
      ser.route({ 
 
      'origin': geolocation.getPosition(), 
 
      'destination': marker.getPosition(), 
 
      'travelMode': google.maps.DirectionsTravelMode.DRIVING 
 
      }, function(res, sts) { 
 
      if (sts == 'OK') ren.setDirections(res); 
 
      }) 
 
     } 
 
     })(marker, i)); 
 
    } 
 

 
    // Check if user support geo-location 
 
    if (navigator.geolocation) { 
 
     navigator.geolocation.getCurrentPosition(function(position) { 
 
     var latitude = position.coords.latitude; 
 
     var longitude = position.coords.longitude; 
 
     var geolocpoint = new google.maps.LatLng(latitude, longitude); 
 

 
     var mapOptions = { 
 
      zoom: 8, 
 
      center: geolocpoint, 
 
      mapTypeId: google.maps.MapTypeId.HYBRID 
 
      } 
 
      // Place a marker 
 
     geolocation = new google.maps.Marker({ 
 
      position: geolocpoint, 
 
      map: map, 
 
      title: 'Your geolocation', 
 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png' 
 
     }); 
 
     }); 
 
    } else { 
 
     // Place a marker 
 
     geolocation = new google.maps.Marker({ 
 
     position: map.getCenter(), 
 
     map: map, 
 
     title: 'Your geolocation', 
 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png' 
 
     }); 
 
    } 
 
    } 
 
    google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map_canvas { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

來源

2012-08-05 01:27:46 geocodezip

Google地理位置和方向API

回答

相關問題