Google Geolocation and Direction API

Question

Google Geolocation and Direction API

Como é que se combina tanto a API de Geolocalização do Google como a API de direcção de modo a que, quando se carrega no marcador de geolocalização e em qualquer um dos marcadores (dos quais destacei as coordenadas), se mostre a direcção entre ambos.

código de geolocalização

<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>

2

javascript geolocation google-maps google-maps-markers google-direction

Author: dda, 2012-08-05

Source

1 answers

score 1 · Answer 1

Adicione um click listener aos marcadores.
quando executar, prima a posição do marcador actual numa matriz.
Se o comprimento do array for dois, chame o serviço de instruções com esses dois locais como pontos de início e fim.

Semelhante a Este exemplo , mas em vez de um "mapa" click listener, use "marcador" click listeners.

Disseste que querias forçar o primeiro clique a estar no marcador de geolocalização, precisas de escrever. código para verificar a localização do marcador e verificar que ele é o marcador de geolocalização Se você quiser fazer isso. Eu pensaria que seria mais simples apenas ter o usuário clicar em um dos marcadores de destino, em seguida, gerar direções a partir do marcador de geolocalização (que você precisaria manter uma referência especial).

Exemplo que assume que o início é o ponto de geolocalização

Excerto de código de exemplo:

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>