vue2pc项目中接入高德地图
vue2项目中接入高德地图api
·
需求
要接入高德地图,通过起点、重点、以及途径点的经纬度画出路线以及标注出途径的点
话不多少先贴一下高德开放平台的地址
https://lbs.amap.com/api/jsapi-v2/guide/abc/plugins#plugins
应用场景很多,选择自己需要的方式,我这里选的是web端
使用步骤
- 需要先注册一个key,同时会有一个秘钥
2、 npm 下载
npm i @amap/amap-jsapi-loader --save
3、在目标页面中
<script>
window._AMapSecurityConfig = {
securityJsCode:'你的秘钥',
}
import AMapLoader from '@amap/amap-jsapi-loader';
methods:{
initMap(){
AMapLoader.load({
key:"你的key",
version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins:['AMap.Driving'],
}).then((AMap)=>{
this.map = new AMap.Map("container",{ //设置地图容器id
viewMode:"3D", //是否为3D地图模式
zoom:13, //初始化地图级别
center:[116.397428, 39.90923], //初始化地图中心点位置
});
this.draw(AMap,this.map)
}).catch(e=>{
console.log(e);
})
},
draw(AMap,map){
//基本地图加载
console.log("draw--AMap",AMap)
//构造路线导航类
console.log('map实例',map)
var driving = new AMap.Driving({
map: map,
panel: "panel"
});
console.log('dricing',driving)
// 根据起终点经纬度规划驾车导航路线
AMap.plugin(['AMap.Driving'],function(){//异步同时加载多个插件
var driving = new AMap.Driving({
map: map,
panel: "panel"
});
console.log('driving',driving)
// 根据起终点经纬度规划驾车导航路线
driving.search(
new AMap.LngLat(116.842315,40.403014),
new AMap.LngLat(116.842315,40.403014),{
waypoints:[new AMap.LngLat(116.426338,39.907949),
new AMap.LngLat(116.385341,39.894858),
new AMap.LngLat(116.390373,39.889059),
new AMap.LngLat(116.364279,39.89258),
new AMap.LngLat(116.430665,39.851601),
new AMap.LngLat(116.3652,39.902272),
new AMap.LngLat(116.383689,39.912541),
new AMap.LngLat(116.384939,39.913987),
new AMap.LngLat(116.396643,39.960645)
]
},
function(status, result) {
console.log('status',status)
if (status === 'complete') {
console.log('绘制驾车路线完成')
// log.success('绘制驾车路线完成')
} else {
console.log('获取驾车数据失败:',result)
// log.error('获取驾车数据失败:' + result)
}
}
);
});
},
}
</script>
最终效果
更多推荐
已为社区贡献1条内容
所有评论(0)