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

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html GoogleMapのルート検索APIのカスタムhttp://bl.ocks.org/ANTON072/0355e0a133b3ddf217cb相关的知识，希望对你有一定的参考价值。

<!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="//maps.googleapis.com/maps/api/js?key=AIzaSyDg13xe7Kt-Kwb0K-3ThoyyXkO38hvWt9I&?sensor=TRUE"></script>
</head>
<body>

  <div id="map_canvas" style="width:75%;height:100%;float:left;"></div>
  <div id="direction_panel" style="width:24%;height:100%;overflow-y:scroll;float:right"></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 request = {
      origin: '東京駅',
      destination: '東京タワー',
      travelMode: google.maps.DirectionsTravelMode.DRIVING,
      waypoints: [
        {location: '国会議事堂前'},
        {location: new google.maps.LatLng(35.660207, 139.729078)}
      ]
    };

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

    directionsService.route(request, callback_direction);

    function callback_direction(result, status){
      if(status === google.maps.DirectionsStatus.OK){
        var directionsDisplay = new google.maps.DirectionsRenderer({
          map: mapCanvas,
          panel: document.getElementById('direction_panel'),
          draggable: true,
          polylineOptions: {
            strokeWeight: 15,
            strokeColor: 'rgba(0, 0, 0, 0.5)'
          }
        });
        directionsDisplay.setDirections(result);
      }
    }

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

  }


  google.maps.event.addDomListener(window, 'load', initialize);
  </script>

</body>
</html>

以上是关于html GoogleMapのルート検索APIのカスタムhttp://bl.ocks.org/ANTON072/0355e0a133b3ddf217cb的主要内容，如果未能解决你的问题，请参考以下文章

html googlemapで简易的なルート検索http://bl.ocks.org/ANTON072/f39adaea933d1b282eee

html 谷歌検索にキーワードをパラメータで渡す

javascript 配列のループ处理

python WARPの検索APIを利用するコードの骨组み.Jupyterに埋め込むととりあえずJSONを取得できます。