l-gaodemap v1.0.4

高德地图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
        }
    }
}

属性

回调

内置API

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

setCenter(data) 跳转中心点

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

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

注意：通过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);  [获取覆盖物]
```javaScript

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

getAllLayer(); 获取所有覆盖物

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

>### showSatellite();  [显示卫星图]
```javaScript

    this.$refs.lMap.showSatellite()

showDriving(res,option); 路线规划

属性名	数据类型	功能说明
res	ArraylngLat	起始点坐标
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|[图标配置](https://lbs.amap.com/api/javascript-api-v2/documentation#marker)|

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

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	ArraylngLat	起始坐标
-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: pathindex, })

>### setMarkerMove(res); [控制带路径动画行动]
|属性名|数据类型|功能说明|
|:-:|:-:|:-:|
|-id|String|被控制物id|
|-lngLat|Array[lnglat]|移动坐标|
|-speed|Number|运行速度|

```javaScript

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