vue整合高德地图规划路径vue整合高德地图规划路径

160 阅读 0 评论 106 点赞

我是靠谱客的博主自觉眼神，这篇文章主要介绍vue整合高德地图规划路径vue整合高德地图规划路径，现在分享给大家，希望可以做个参考。

vue整合高德地图规划路径

业务需求：项目中需要一个地图来实现路径规划

1、引入插件

npm install vue-amap --save

2、在vue项目中配置高德地图

main.js

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: 'your key',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
});

key值为在高德官网申请的key值

3、在项目需要的页面中引入veu-amap

import { AMapManager,lazyAMapApiLoaderInstance } from 'vue-amap'

4、静态页面

<el-amap vid="amap" :center="center"
:zoom="zoom" :amap-manager="amapManager">
<el-amap-polyline :editable="polyline.editable"
:path="polyline.path"></el-amap-polyline>
<el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position"
:content="marker.content">
</el-amap-marker>
</el-amap>

属性	作用	属性类型
vid	地图容器节点的ID。	静态属性
animateEnable	地图平移过程中是否使用动画，默认为true，即使用动画。	静态属性
zooms	地图显示的缩放级别在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]	动态属性
center	地图中心点	动态属性
mapStyle	地图样式	设置地图显示样式，目前支持normal（默认样式）、dark（深色样式）、light（浅色样式）、fresh(osm清新风格样式)四种

5、返回地图实例的方法

this.map =
new AMap.Map('amap', {})

6、在地图上添加标记,中心点

//页面中绑定方法已在4中标明
data(){
return{
markers:[经度，纬度],
center:[经度，纬度]
}
}
//动态渲染
methods:{
updata:{
this.center = [longitude, latitude]
let marker = {
position: [longitude, latitude]
};
this.markers.push(marker);
}
}

7、可以通过折线的方式渲染路径

//可参考文档中polyline属性,页面中绑定方法已在4中标明
data(){
return{
polyline: {
path: [],
editable: false
},
}
}
methods:{
getPolyline(){
let trackPaty = [[经度，纬度]......]
that.polyline.path = trackPath
}
}

属性	类型	作用
visble	boolean	是否可见
editable	boolean	是否可编辑
path	Array	折线的数组坐标
outlineColor	String	颜色线条描边颜色，此项仅在isOutline为true时有效，默认：#000000
geodesic	boolean	是否绘制大地线，默认false，不支持相关示例
isOutline	boolean	是否带描边
lineJoin	String	折线拐点的绘制样式，默认值为’miter’尖角，其他可选值：'round’圆角、'bevel’斜角