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>

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

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

默认加载的效果

搜索后的效果

 

点击后的效果