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’斜角

附官方文档：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install