开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 8 天，点击查看活动详情

Vue实现高德地图、vue使用vue-amap

官方网站 vue-amap.guyixi.cn/

1、安装

npm install @vuemap/vue-amap --save

2、引入初始化

对于 vue-amap 的初始化只需要调用 initAMapApiLoader 方法即可

//import VueAMap from '@vuemap/vue-amap'; //选一个
import VueAMap from "vue-amap"; //选一个
import '@vuemap/vue-amap/dist/style.css';
Vue.use(VueAMap); 

VueAMap.initAMapApiLoader({ key: 'YOUR_KEY', }); 

3、使用

页面上使用

组件

 <el-amap 
       ref="map" 
       :center="center" 
       :zoom="zoom" 
       @init="initMap" 
       class="amap-demo"
       style="height: 300px;"
       >
</el-amap>

定义数据：

 center: [121.329402, 31.228667],
 zoom: 13,

定义方法：

 // 初始化地图
    initMap(map) {
          let marker = new AMap.Marker({
            position: [121.59996, 31.197646]
          });
          map.add(marker);
          this.map = map;
          console.log('map initMap: ', map)
},

○ 基础版本完整部分

<template>
    <div class="amap-box">
       <el-amap 
       ref="map" 
       :center="center" 
       :zoom="zoom" 
       @init="initMap" 
       class="amap-demo"
       style="height: 300px;"
       >
      </el-amap>
    </div>
</template>
<script>
export default {
  data() {
    return {
      center: [121.329402, 31.228667],
      zoom: 13,
    };
  },
  created() {
  },
  methods: {
    // 初始化地图
    initMap(map) {
          let marker = new AMap.Marker({
            position: [121.59996, 31.197646]
          });
          map.add(marker);
          this.map = map;
          console.log('map initMap: ', map)
    }
  }
};
</script>

地图渲染完成，给地图增加功能

4、功能添加

- 添加点的标记

el-amap包裹住 el-amap-marker

结构很简单

这里解释一下结构里面的参数

amap-manager： 地图管理对象
vid：地图容器节点的ID
zooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]
center： 地图中心点坐标值
plugin：地图使用的插件
events： 事件

① data里面定义events事件

分别包含了里面初始化函数和地图点击事件

events: {
      init:this.mapInit,
       // 'moveend': this.moveend,
       // 'zoomchange': this.zoomchange,
      'click': this.mapClick
 },

② 初始化函数

 // 地图初始化函数
            mapInit(o){
                // console.log(o.getCenter())
                // console.log(this.$refs.map.$$getInstance())
                o.getCity(result => {
                    this.cityInfo=result
                    console.log(result);
   })
},

③ 点击函数

 //点图点击事件
            async mapClick(e){
                // console.log(e)
                let {lng,lat} =e.lnglat;
                this.markers=[];//控制是否显示多个
                this.markers.push([lng,lat]);
                // this.$emit('getMapClickLngLat',[lng,lat])//获取点击地图点经纬度并传递给父组件
                let addressInfo=await this.getAddressFromLngLat(lng,lat);
                console.log(addressInfo);
                this.$emit('getAddressInfo',addressInfo)//点击地图获取地址并传递给父组件
                let cancataddress=this.addresscon+addressInfo.formattedAddress+'、';
                this.addresscon=addressInfo.formattedAddress.length>0?cancataddress:'';
 },

④ 点击函数用到经纬度转地址

 //根据经纬度获取地址
            getAddressFromLngLat(lng,lat){
                let {cityInfo}=this
                let {citycode}=cityInfo
                return new Promise((resolve,reject)=>{
                    AMap.plugin('AMap.Geocoder', ()=> {
                        let geocoder = new AMap.Geocoder({
                            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                            city:citycode
                        })
                        geocoder.getAddress([lng,lat], (status, result)=> {
                            // console.log(status,result)
                            if (status === 'complete' && result.info === 'OK') {
                                // result为对应的地理位置详细信息
                                let {addressComponent,formattedAddress}=result.regeocode
                                let {province,city,district,township}=addressComponent
                                resolve({
                                    formattedAddress,
                                    province,
                                    city,
                                    district,
                                    township
                           })
                        }
                  })
               })
        })
   },

点击地址：成功显示标记

需要注意的地方

显示多个标记：只需要将地点标记赋值为空数组隐藏掉即可

// this.markers=[];//控制是否显示多个

实现效果

初始化显示多个标记

mounted里面方法获取想要的数据以后赋值

定义：
 chushidata:[[118.567733, 31.183549],[119.128036, 31.333812],[119.512558, 31.070694]],

直接将标记数据更换即可
this.markers=this.chushidata;

给标记添加文本

① el-amap-marker上添加 :text 属性

<el-amap-marker
               vid="component-marker"
               v-for="(marker, index) in markers"
                :position="marker.position"
                :label="marker.label"
                :text="marker.label"
            >
                <!-- 显示参数 -->
</el-amap-marker> 

② 更改格式数据

 chushidata:[
                    {position:[118.567733, 31.183549],label: { content: '<div class="divClass">地点</div>', offset: [-20, -30]}},
                    {position:[119.128036, 31.333812],label: { content: '地点', offset: [-20, -30]}},
                    {position:[119.512558, 31.070694],label: { content: '地点', offset: [-20, -30]}},
                ],

③ 更改点击事件的标记插入，我自定义了divClass类名

 this.markers.push({position:[lng,lat],label: { content: `<div class="divClass">${addressInfo.formattedAddress}</div>`, offset: [-20, -30] }});
 

放到样式里面

.divClass{
        padding: 10px;
        background:#1890FF;
        border-radius:5px;
        color:#fff;
        border: 0px;
}

最后实现效果