Fatal编程技术网
  • javascript/
  • Javascript 在谷歌地图中指定两点之间的路线

Javascript 在谷歌地图中指定两点之间的路线

javascript google-maps-api-3

Javascript 在谷歌地图中指定两点之间的路线,javascript,google-maps-api-3,frontend,Javascript,Google Maps Api 3,Frontend,我在指定两点之间的路线时遇到了问题。所以 问题如下：我有一个固定的初始点和几个带有描述和按钮路由的地方，当我按下路由按钮时，地图上出现从起点到所需位置的路由旁边。 我希望你能帮助我 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8

我在指定两点之间的路线时遇到了问题。所以 问题如下：我有一个固定的初始点和几个带有描述和按钮路由的地方，当我按下路由按钮时，地图上出现从起点到所需位置的路由旁边。 我希望你能帮助我

   <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>
  </head>
  <body>

  <button onclick="">Route to point one</button>
      <button oclick="">Route to point two</button>

    <div id="map">Route</div>
    <script>
      function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: new google.maps.LatLng(50.66956513913178,17.922616861760616),
        });
        directionsDisplay.setMap(map);
          var marker = new google.maps.Marker({
                     position: new google.maps.LatLng(50.66956513913178,17.922616861760616),
                     map: map


                 });
          var endmarker = new google.maps.Marker({
                     position: new google.maps.LatLng(50.66956513913178,17.922616861760616),
                     map: map


                 });
        var onChangeHandler = function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        };

      endmarker.addEventListener('click', onChangeHandler);
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        directionsService.route({
          origin:  new google.maps.LatLng(50.66956513913178,17.922616861760625),
          destination: document.getElementById('end').value,
          travelMode: 'WALKING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
    </script>
  </body>
</html>


方向服务
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#浮动面板{
位置：绝对位置；
顶部：10px；
左：25%；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
文本对齐：居中；
字体系列：“Roboto”，“sans-serif”；
线高：30px；
左侧填充：10px；
}
路线到第一点
到第二点的路线
路线
函数initMap（）{
var directionsService=新的google.maps.directionsService；
var directionsDisplay=新建google.maps.DirectionsRenderer；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：17，
中心：新google.maps.LatLng（50.66956513913178,17.922616861760616），
});
方向显示.setMap（地图）；
var marker=new google.maps.marker({
位置：new google.maps.LatLng（50.66956513913178,17.922616861760616），
地图：地图
});
var endmarker=new google.maps.Marker({
位置：new google.maps.LatLng（50.66956513913178,17.922616861760616），
地图：地图
});
var onChangeHandler=函数（）{
计算显示路线（方向服务、方向显示）；
};
endmarker.addEventListener（'click'，onChangeHandler）；
}
函数calculateAndDisplayRoute（方向服务、方向显示）{
方向服务.路线({
来源：新google.maps.LatLng（50.66956513913178,17.922616861760625），
目标：document.getElementById（'end'）。值，
travelMode:“步行”
}，功能（响应、状态）{
如果（状态=='OK'）{
方向显示。设置方向（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}
要添加按钮单击功能以路由到各个点，一个选项是修改
计算显示路由
以第二个点作为参数

function calculateAndDisplayRoute(point) {
  directionsService.route({
    origin: new google.maps.LatLng(50.66956513913178, 17.922616861760625),
    destination: point,
    travelMode: 'WALKING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
在全局范围内定义点（以及方向服务/渲染器）：

var directionsService;
var directionsDisplay;
var point1 = {lat: 50.669552,lng: 17.914806};
var point2 = {lat: 50.669151, lng: 17.932956};
HTML:

到一点的路线
到第二点的路线
路线
var定向服务；
var方向显示；
变量点1={
纬度：50.669552，
液化天然气：17.914806
};
变量点2={
纬度：50.669151，
液化天然气：17.932956
};
函数initMap（）{
directionsService=新的google.maps.directionsService；
directionsDisplay=新建google.maps.DirectionsRenderer；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：17，
中心：新google.maps.LatLng（50.66956513913178，17.922616861760616），
});
方向显示.setMap（地图）；
var marker=new google.maps.marker({
位置：new google.maps.LatLng（50.66956513913178,17.922616861760616），
地图：地图
});
var endmarker=new google.maps.Marker({
位置：new google.maps.LatLng（50.66956513913178,17.922616861760616），
地图：地图
});
}
函数calculateAndDisplayRoute（点）{
方向服务.路线({
来源：新google.maps.LatLng（50.66956513913178，17.922616861760625），
目的地：点，
travelMode:“步行”
}，功能（响应、状态）{
如果（状态=='OK'）{
方向显示。设置方向（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}

<button onclick="calculateAndDisplayRoute(point1);">Route to point one</button>
<button onclick="calculateAndDisplayRoute(point2);">Route to point two</button>