JS 实现GOOGLE地图线路规划

最新推荐文章于 2024-07-05 20:35:03 发布

戴子

最新推荐文章于 2024-07-05 20:35:03 发布

阅读量3.1k

点赞数 1

分类专栏： GOOGLE MAP 导航 WEB

本文链接：https://blog.csdn.net/dailuwen/article/details/49862161

版权

WEB 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

GOOGLE MAP

2 篇文章 0 订阅

订阅专栏

导航

1 篇文章 0 订阅

订阅专栏

1、准备GOOGLE地图的KEY

如果不知道申请地址，请点击此链接获取 GOOGLE MAP KEY

2、废话不多说，开始测试 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>

3、HTML代码

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

4、收获地图；(如果还有疑问可访问GOOGLE MAP 官网 GOOGLE MAP API)

戴子

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
JS 实现GOOGLE地图线路规划

1、准备GOOGLE地图的KEY如果不知道申请地址，请点击此链接获取 GOOGLE MAP KEY2、废话不多说，开始测试 JS代码(上海到江苏路线) function initMap() { var initAddr = {lat: 31.230416, lng: 121.473701}; var destAddr = {lat: 32.230416, lng:
复制链接

扫一扫