高德地图Vue封装

使用方法

<template>
    <lGaodemap ref="lMap" @onload="startMap" :option="option" :center="center" />
</template>

import lGaodemap from 'l-gaodemap'

export default {
    components:{
        lGaodemap
    },
    data() {
        return: {
            // 初始化中心点
            center: [],
            option: {
                key: 'xxxxxxxxx', //高德地图key
                version: '1.4.15', // 使用版本
                plugins: [         // 使用地图组件设置
                    'AMap.AMapUI',
                    'AMap.Autocomplete',
                    'AMap.MouseTool',
                    'AMap.PlaceSearch',
                    'AMap.Geocoder',
                    'AMap.IndoorMap',
                    'AMap.PolyEditor',
                    'AMap.ToolBar',
                    'AMap.addToolbar',
                    'AMap.MarkerClusterer',
                ]
            }
        }
    },
    methods: {
        // 地图加载成功后回调
        startMap(res){
            this.aMap = res
        }
    }
}

属性

|属性名|数据类型|功能说明|默认值 |:-:|:-:|:-:|:-:| |mapOption|Object|地图初始化数据包含【zoom,pitch,center,viewMode】等属性|{resizeEnable: true,zoom: 10,viewMode: "3D",pitch: 45,}| |option|Object|高德地图load使用数据【包含，key,version,plugins】等属性|{}| |center|Array|初始化地图中心点坐标【优先级高于mapOption】|[112.980489, 25.642876]|

回调

|属性名|数据类型|功能说明|默认值 |:-:|:-:|:-:|:-:| |onload|（aMap,map）|key注册成功后回调| (AMap,AMap.Map)

内置API

<template>
    <lGaodemap ref="lMap" @onload="startMap" :option="option" :center="center" />
</template>

setCenter(data) [跳转中心点]

|属性名|数据类型|功能说明|默认值 |:-:|:-:|:-:|:-:| |data|Array|跳转目标经纬度|[Number, Number]或LngLat

    this.$refs.lMap.setCenter([112.980489, 25.642876])

add(res,key)[添加覆盖物并渲染至地图]

|属性名|数据类型|功能说明| |:-:|:-:|:-:| |res|(VectorOverlay或Array)|添加覆盖物/图层。参数为单个覆盖物/图层，或覆盖物/图层的数组| |key|String|覆盖物唯一标识（重复会覆盖之前创建覆盖物）|

注意：通过add方法添加的覆盖物可以通过对应的key进行管理，由getLayer()方法可以取出

    this.$refs.lMap.add(this.aMap.Marker({
        position: [],
        offset:{},
        icon: {}
    }),'markerId')

addLayer(res,key); [添加覆盖物]

    this.$refs.lMap.addLayer(this.aMap.Marker({
        position: [],
        offset:{},
        icon: {}
    }),'markerId')

getLayer(key); [获取覆盖物]

    this.$refs.lMap.getLayer('markerId')

getAllLayer(); [获取所有覆盖物]

    this.$refs.lMap.getAllLayer('markerId')

showSatellite(); [显示卫星图]

    this.$refs.lMap.showSatellite()

showDriving(res,option); [路线规划]

|属性名|数据类型|功能说明| |:-:|:-:|:-:| |res| Array[lngLat]|起始点坐标| |option|Object|配置

    this.$refs.lxMap.showDriving([
                [112.914257, 26.507488],
                [112.957246, 25.33779]
            ])

showResource(res); [显示资源]

|属性名|数据类型|功能说明| |:-:|:-:|:-:| |res|Array[Object]|资源配置数组对象| |-title|String|描述（弹窗标题）| |-lnglat|Array[Number,Number]|坐标| |-content|String|弹窗内容| |-icon|String(imgSrc)|图标地址| |-iconColor|String|图标底色| |-option|Object|图标配置|

注意： 所有marker都会被管理在layers中的resource中

this.$refs.lxMap.showResource([
                {
                    title: 'KFC',
                    icon: 'xxxxx',
                    lnglat: [116.334115,39.996483],
                    iconColor: '#ccc',
                    content: `<h>这不是肯德基</h>`,
                    option: {
                        // 可拖拽
                        draggable: true
                    }
                }
            ]).then(res=>{
                // 回调返回生成的markers(可进行拖拽回调的绑定等)
                 markers.forEach(resM => {
                    resM.on('dragend',resG=>{
                        console.log('资源拖拽', resG);
                    })
                 })
            })

showAnimation(res); [显示带路径动画]

|属性名|数据类型|功能说明| |:-:|:-:|:-:| |-id|String|对应图层id| |-path|Array[[lngLat],[lngLat]]|路径经纬度数组| |-lnglat|Array[lngLat]|起始坐标| |-icon|String|图标地址| |-lineOption| Object| 路径配置| |-startLineOption|Object| 规划路径配置 |-afterLineOption|Object| 经过后路径配置

let path = [
    [113.040801, 25.411161],
    [113.144511, 25.40985],
    [113.174683, 25.510363],
    [113.064046, 25.521326],
    [113.040801, 25.411161],
]
let index = 0
// 动画
this.$refs.lxMap.showAnimation({
    id: 'xxxxx1',
    path: [].concat(path),
    lnglat: path[index],
})

setMarkerMove(res); [控制带路径动画行动]

|属性名|数据类型|功能说明| |:-:|:-:|:-:| |-id|String|被控制物id| |-lngLat|Array[lnglat]|移动坐标| |-speed|Number|运行速度|

this.$refs.lxMap.setMarkerMove({
    id: 'xxxxx1',
    lngLat: [113.144511, 25.40985],
    speed: 10000
})