html GoogleMap的でルート検索のオプションを実験

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html GoogleMap的でルート検索のオプションを実験相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  </style>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDg13xe7Kt-Kwb0K-3ThoyyXkO38hvWt9I&?sensor=TRUE"></script>
</head>
<body>

  <div id="map_canvas" style="width:100%;height:100%;float:left;"></div>

  <script>
  var mapCanvas;
  function initialize(){
    var mapDiv = document.getElementById('map_canvas');
    var initPos = new google.maps.LatLng(35.658613, 139.745525);
    var mapOptions = {
      center: initPos,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    mapCanvas = new google.maps.Map(mapDiv, mapOptions);

    var requests = [
      {
        origin: '東京駅',
        destination: initPos,
        travelMode: google.maps.DirectionsTravelMode.WALKING
      },
      {
        origin: '品川駅',
        destination: initPos,
        travelMode: google.maps.DirectionsTravelMode.WALKING
      },
      {
        origin: '中野駅',
        destination: initPos,
        travelMode: google.maps.DirectionsTravelMode.WALKING
      }
    ];

    var directionsService = new google.maps.DirectionsService();

    requests.forEach(function(request){
      directionsService.route(request, callback_direction);
    });

    function callback_direction(result, status){
      var defer = $.Deferred();
      if(status === google.maps.DirectionsStatus.OK){
        var directionsDisplay = new google.maps.DirectionsRenderer({
          map: mapCanvas,
          preserveViewport: true,
          suppressInfoWindows: true,
          polylineOptions: {
            strokeWeight: 15,
            strokeColor: 'rgba(0, 0, 0, 0.5)',
          }
        });
        directionsDisplay.setDirections(result);
        defer.resolve();
      }
      return defer.promise();
    }

    function createMarker(opts){
      return new google.maps.Marker(opts);
    }

  }

  google.maps.event.addDomListener(window, 'load', initialize);

  </script>

</body>
</html>

以上是关于html GoogleMap的でルート検索のオプションを実験的主要内容，如果未能解决你的问题，请参考以下文章

html GoogleMapのルート検索APIのカスタムhttp://bl.ocks.org/ANTON072/0355e0a133b3ddf217cb

text lsのオプション#memo

sh 庆典のオプション引数実装

text emacs dird lsへのオプション#memo

python 「実践コンピュータビジョン」7章画像検索の読书会用コード

sh シェルでオプション引数などの设定をする时のコード