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>

值得一提的是，地理位置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>

Google地理位置和方向API

相关推荐