谷歌地理定位和方向 API

Question

如何将 Google Geolocation 和 Direction 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>

Answer 1

• 向标记添加点击侦听器。
• 执行时，将当前标记的位置推入数组。
• 如果数组的长度为 2，则以这两个位置作为起点和终点调用路线服务。

类似于this example，但不是“地图”点击侦听器，而是使用“标记”点击侦听器。

您确实说过您想强制第一次点击是在地理位置标记上，如果您想这样做，您需要编写代码来检查标记的位置并验证它是地理位置标记。我认为让用户点击其中一个目标标记，然后从地理位置标记生成方向会更简单（您需要保留一个特殊的参考）。

Example that assumes the start is the geolocation point

示例中的代码 sn-p：

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: 'https://maps.google.com/mapfiles/ms/micons/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>