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-boxclass="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>这样使用起来就比较简单了，由于时间的关系就不在继续了，下面几个截图参考下：默认加载的效果

搜索后的效果

点击后的效果

热门工具换一换