高德地图 AMap.Driving

AMap.Driving 驾车路线规划服务,提供起、终点坐标的驾车导航路线查询功能

官方解释:驾车路线规划服务,提供起、终点坐标的驾车导航路线查询功能。AMap. Driving构造函数的参数为 DrivingOptions 对象。DrivingOptions 允许设置驾车策略和返回信息详略。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败,系统将返回错误信息。

一般如果自己有车子的话,就可以选择自驾游去旅游,高德地图为我们提供了一个自驾游插件O(∩_∩)O哈哈~AMap. Driving
来看一下示意图:

这里写图片描述
示意代码

var map = new AMap.Map('container',{
            resizeEnable: true,
            zoom: 10,
            center: [116.39,39.9]
        });
        AMap.service('AMap.Driving',function(){//回调函数
            var driving= new AMap.Driving({
                map: map,
                panel: "result1"
            });

            driving.search([{keyword:'方恒国际',city:'北京'},{keyword:'壶口瀑布'}], function(status, result){
              console.log(result);
          });   

以上查找路线你同样可以选择以经纬度来查询,如下:

driving.search([116.379028, 39.865042], [116.427281, 39.903719], function(status, result) {
     //TODO 解析返回结果,自己生成操作界面和地图展示界面
});

跟多高级的功能可以查看高德的api文档,一下显示几个比较常见的对象信息
这里写图片描述

四种自驾游类型
这里写图片描述

信息对象,我们用来获取途径的城市列表
这里写图片描述

更多内容我们可以请参考官方api

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果在Vue项目中使用高德地图时遇到了“AMap.Driving is not a constructor”错误,这可能是因为您未正确引入Driving插件或引入方式不正确。 在Vue项目中使用高德地图,可以通过在main.js文件中引入高德地图API并注册为全局变量来实现全局使用。例如: ```javascript // main.js import Vue from 'vue' import App from './App.vue' // 引入高德地图API import AMap from 'AMap' Vue.config.productionTip = false // 注册高德地图API为全局变量 Vue.prototype.AMap = AMap new Vue({ render: h => h(App), }).$mount('#app') ``` 在上面的代码中,我们引入了高德地图API,并通过Vue.prototype将其注册为Vue的全局变量,使其在所有组件中可用。 然后,您可以在Vue组件中使用AMap对象和Driving类来计算路线并绘制路径。例如: ```javascript <template> <div id="mapContainer" style="height:500px"></div> </template> <script> export default { data() { return { map: null, driving: null } }, mounted() { // 初始化地图 this.map = new this.AMap.Map('mapContainer', { center: [116.397428, 39.90923], zoom: 13 }); // 创建Driving对象 this.driving = new this.AMap.Driving({ map: this.map, panel: 'panel' }); // 计算路线 var points = [ [116.379028, 39.865042], [116.414032, 39.865042], [116.414032, 39.899042], [116.379028, 39.899042] ]; this.driving.search(points, (status, result) => { if (status === 'complete' && result.info === 'OK') { // 获取路线经纬度坐标数组 var path = result.routes[0].path; // 创建Polyline对象绘制路径曲线 var polyline = new this.AMap.Polyline({ path: path, strokeColor: '#3366FF', strokeWeight: 5, strokeOpacity: 0.8 }); polyline.setMap(this.map); } else { alert('路线计算失败'); } }); } } </script> ``` 在上面的代码中,我们在Vue组件的mounted生命周期函数中创建了地图和Driving对象,并计算了路线。请注意,我们使用Vue.prototype.AMap和this.AMap来访问全局的AMap对象,并使用this.AMap.Driving来访问Driving类。这样,您就可以在Vue项目中使用高德地图API,而不必担心“AMap.Driving is not a constructor”错误。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值