JS 实现GOOGLE地图线路规划

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)

JS 实现GOOGLE地图线路规划相关推荐

uniapp使用高德地图线路规划
地图终于实现了想要的功能准备高德地图提供了线路规划的接口,但是由于uniapp使用的是小程序的SDK,有些东西就会无法使用参考文档 SDK里面的东西都是小程序中的语法,比如wx.getLocat ...
android 百度地图线路规划问题
首先集成百度开发环境,我就不叙述了:直接奔入正题,路线规划在官方文档上也很清楚,但是个人感觉少说一句话:关于继承自OverlayManager的子类在官方demo中可以获取. 下面是官方文档: //在 ...
高德地图线路规划+导航
准备工作在以前一篇博客中写过了:http://www.cnblogs.com/rainday1/p/5305469.html 但是官网下载的最新jar包不需要单独导入定位包,而且有些类过时了,所以这里 ...
怎么在谷歌地图上画图_如何在Google地图上规划具有多个目的地的公路旅行
怎么在谷歌地图上画图 Whether you're planning a day out on the town, or want to orchestrate the perfect road tr ...
高德地图线路规划的接入使用（步行-公交-驾车）
参考文案:http://lbs.amap.com/api/android-sdk/guide/route-plan/drive/ 官方文档:http://a.amap.com/lbs/static/u ...
google地图静态下载和js调用
google地图静态下载和js调用 google staticmap使用 google地图js调用 google地图静态下载 1)注册google帐号 2)开启google static map功能 ...
小程序使用腾讯地图实现线路规划
问题:微信小程序测试号在开发者工具中可以显示出地图路线,而手机扫码不能显示路径,手机真机调试可以显示出路径. 解决:在微信消息界面下拉,有一个最近使用的小程序,把测试号删了就能正常显示了,可能是因为缓 ...
百度地图api 自定义驾车线路规划车辆实时定位
项目需求根据百度api给出的接口实现从始发地→目的地线路规划以及车辆的实时位置跟踪定位 1.首先引入百度API <script type="text/javascript& ...
android高德地图设置经纬度,安卓高德地图开发自定义线路规划(按着自己定义的经纬度规划线路)...
[实例简介] 自定义地图的线路规划问题,代码可以直接的借用,方便大家学习 [实例截图] [核心代码] (YN)安卓高德地图自定义线路规划(按着指定的经纬度规划线路) └── YnGaoDeThreeM ...

JS 实现GOOGLE地图线路规划

JS 实现GOOGLE地图线路规划相关推荐

最新文章

热门文章