Google地图实现路线规划(JavaScript)
侧边栏壁纸
  • 累计撰写 269 篇文章
  • 累计收到 275 条评论

Google地图实现路线规划(JavaScript)

Karry Bai
2017-05-19 / 0 评论 / 174 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2020年12月25日,已超过551天没有更新,若内容或图片失效,请留言反馈。

关于谷歌地图实现地图路线规划的功能,具体实现代码如下:

Html代码:

<body onload="initMap()">   
<div id="map_canvas" style="height:90%;top:30px"></div>   
</body>

JS代码:

<script language="javascript" type="text/javascript">   
function initMap() {  
  var initAddr = {lat: 31.230416, lng: 121.473701};  
  var destAddr = {lat: 32.230416, lng: 120.47370};  
  
  var map = new google.maps.Map(document.getElementById('map_canvas'), {  
    center: initAddr,  
    scrollwheel: false,  
    zoom: 7  
  });  
  
  var directionsDisplay = new google.maps.DirectionsRenderer({  
    map: map  
  });  
  // Set destination, origin and travel mode.  
  var request = {  
    origin: initAddr,  
    destination: destAddr,  
    travelMode: google.maps.TravelMode.DRIVING  
  };  
  
  // Pass the directions request to the directions service.  
  var directionsService = new google.maps.DirectionsService();  
  directionsService.route(request, function(response, status) {  
    if (status == google.maps.DirectionsStatus.OK) {  
      // Display the route on the map.  
      directionsDisplay.setDirections(response);  
    }  
  });  
}  
</script>

根据自己项目的需要,根据上面代码的具体实现,封装上面代码。

0

评论 (0)

取消