vue-封装高德地图组件

        最近在做vue项目，研究了高德地图，感觉不错在这里发布一下，只为了整理和记录，方便后期的查阅，废话不多说了。

首先在vue项目中安装高德地图插件。

指令： npm install vue-amap --save

插件安装完成后，在main.js将插件引入，方式如下：

...
import AMap  from 'vue-amap';
Vue.use(AMap);
// import './public/style/index.css'
import './public/style/common.scss'
...

加载高德地图插件

AMap.initAMapApiLoader({
    key: '*********************', //这里填写自己申请的key
    plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation']
})

以上高德地图的配置，如果项目能正常运行，基本上完成了下面开始组件的封装。

新建 component : 

gad.vue是一个弹出框，只是为了让高德地图组件在其中显示。

map.vue是我们要编写的组件。

我们先看看map.vue 组件的代码、后续讲解。

html:

<div class ="gaodemap">
    <div class="amap-page-container">

<--map容器-->

<el-amap-search-box class="search-box" :on-search-result="onSearchResult"></el-amap-search-box> <el-amap vid="amapDemo" :zoom="15" v-if="mapCenter" :center="mapCenter" :events="events" :plugin="plugin"> <el-amap-marker v-for="marker in markers" :key="marker.key" :position="marker.position" :events="marker.events" ></el-amap-marker> <el-amap-info-window v-if="window" :position="window.position" :visible="window.visible" :content="window.content" ></el-amap-info-window> </el-amap> </div></div>

css:

<style>
    .gaodemap .amap-page-container {
        height: 500px !important;
        position: relative;
        padding-top: 30px;
        margin: 0 auto;
    }
    .gaodemap .search-box {
        position: absolute;
        float: right;
        top: 50px;
        left: 350px;
    }
</style>

div　amap-page-container　为高德地图容器

el-amap-search-box     高德地图自带的组件搜索框

el-amap-marker 高德地图组件   地图上的遮盖物 也就是鼠标点击后的一个标记

 el-amap-info-window 高德地图组件  点击标记会弹出的消息提示框

js:

data () {
    return {
        markers: [],//遮盖物集合
        windows: [], //提示消息集合
        window: '',
        mapCenter: [], //设置中心点经纬度
        events:{
            'click': (e) => { //地图的点击事件
                let x = e.lnglat.getLng();
                let y = e.lnglat.getLat();
                this.windows.forEach(window => {
                    window.visible = false;
                });
                this.$emit("lnglatHandler",x,y);
                let arr =[];
                let obj = {lng:x,lat:y};
                arr.push(obj);
                this.getlnglat(arr); // 将点击后获取的经纬度传给地图
            }
        },
        plugin: [{
            pName: 'ToolBar',//放大缩小工具
            events: {
                init(instance) {
                }
            }
        },{
            pName: 'Scale',//比例尺
            events: {
                init(instance) {
                }
            }
        }]
    };
},

props:['lngitude','latitude'],  经度、纬度

created(){ //首次加载 将经纬度传递给地图组件
    let arr =[];
    let obj = {lng:this.lngitude,lat:this.latitude};
    arr.push(obj);
    this.getlnglat(arr);
},

methods：

onSearchResult(pois) { //搜索框搜索方法，将结果传给地图组件

   this.getlnglat(pois);

},

addmarker(lng,lat,index){    //添加遮盖物 
    let self =this;
    let marker ={
        position: [lng, lat + index * 0.001],
        events: {
            click(e) {
                self.windows.forEach(window => {
                    window.visible = false;
                });
                self.window = self.windows[index];
                self.$nextTick(() => {
                    self.window.visible = true;
                });
            }
        }
    };
    return marker;
},

addWindow(lng,lat,index){   //添加消息提示信息 遮盖物点击弹出的消息

    let obj = {
        position: [lng, lat + index * 0.001],
        content: `<div class="prompt">东经${ lng }  北纬${lat}</div>`,
        visible: false
    };
    return obj;
},

getlnglat(arr,latSum = 0,lngSum = 0){    //这就是我们封装的地图组件了，看到这基本上就完事了。
    this.markers = [];
    this.windows = [];
    let self = this;
    if (arr.length > 0) {
        arr.forEach(function (item, index) {
            let  {lng, lat} = item;
            lngSum += lng;
            latSum += lat;
            self.markers.push(self.addmarker(lng,lat,index));
            self.windows.push(self.addWindow(lng,lat,index));
        })
        let center = {
            lng: lngSum / arr.length,
            lat: latSum / arr.length
        };
        this.mapCenter = [center.lng, center.lat];
    }
}

以上就是map组件的全部内容了，。

下面是在弹出框中弹出框引用和使用组件了。

import gadMapArea from '@/components/common/dialog/gad-map/map.vue'

<gadMapArea :lngitude="lngitude" :latitude="latitude" @lnglatHandler="lnglatHandler"></gadMapArea>

这样使用起来就比较简单了，

由于时间的关系就不在继续了 ，下面几个截图参考下：

默认加载的效果

搜索后的效果

点击后的效果