2

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

1 に答える 1

1
  • クリック リスナーをマーカーに追加します。
  • 実行時に、現在のマーカーの位置を配列にプッシュします。
  • 配列の長さが 2 の場合は、これら 2 つの場所を始点と終点としてルート サービスを呼び出します。

この例と同様ですが、「マップ」クリック リスナーの代わりに「マーカー」クリック リスナーを使用します。

最初のクリックを強制的に地理位置情報マーカーに合わせたいと言っていましたが、マーカーの位置を確認し、それが地理位置情報マーカーであることを確認するコードを記述する必要があります。ユーザーに目的地マーカーの 1 つをクリックしてもらい、地理位置情報マーカー (特別な参照を保持する必要があります) からルート案内を生成する方が簡単だと思います。

開始点が位置情報ポイントであると仮定した例

例のコード スニペット:

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>

于 2012-08-05T01:27:46.320 に答える