vue中使用vue-amap高德地图组件选择经纬度

0.背景

在实际应用中，往往会有在地图中选择经纬度坐标的需求，比如添加一个店铺啥的，饿了么出品的高德地图组件vue-amap比较好使，本文讲解vue-amap的实际应用。实现的效果在地图中点击任意地方可获取相应的经纬度，同时也可以搜索。

1.安装vue-amap

在你的工程根目录下执行以下命令：

npm install --save vue-amap

2.封装组件AMap.vue

话不多说直接上代码。

<template>
  <div>
    <el-dialog
      width="60%" top="50px"
      :before-close="cancel"
      :closable="false"
      :mask-closable="false"
      :visible="visible"
      :close-on-click-modal="false"
    >
      <span>
       <el-amap-search-box
          class="search-box"
          :search-option="searchOption"         
          :on-search-result ="querySearch"   
      > </el-amap-search-box>
        <div id="amap-container" style="width:100%;height:500px;">
          <el-amap class="amap-box" :vid="'amap-vue'" :center="center" :plugin="plugin" :events="events" :zoom="zoom">
            <el-amap-marker :position="center"></el-amap-marker>
              <el-amap-marker
              v-for="(marker,index) in markersArray"
              :key ="'marker'+index"
              :position ="marker">
              </el-amap-marker>
          </el-amap>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import VueAMap from 'vue-amap';
Vue.use(VueAMap);

export default {
    name: "AMap",
    components: {},
    data () {
        return {
          mapApiKey:"79ccbd32716b72f5baxsf4tjif97c1b", //您申请的key值
          markersArray: [106.797248,26.642313],
          zoom: 15,
          lnglatInfo: {
              lng: '',
              lat: '',
              addr: ''
          }
          ,searchOption: {
                city: "全国",
                citylimit: false,
              }
          ,center: [106.797248,26.642313]
          ,plugin: [
            {
              pName: 'Scale',
              events: {
                init(instance) {
                  // console.log(instance)
                }
              }
            },
            {
              pName: 'ToolBar',
              position:'RT',
              events: {
                init(instance) {
                  // console.log(instance)
                }
              }
            }
          ]
          ,events: {
            init(o){
              // console.log(o.getCenter());
            },
            zoomchange: (e) => {
                console.log(e);
            },  
            zoomend: (e) => {
                //获取当前缩放zoom值
                // console.log(this.$refs.map.$$getInstance().getZoom());
                console.log(e);
            },
            click: e => {
            //地图中的点击事件
              this.center =  [e.lnglat.lng,e.lnglat.lat];
              this.markersArray = [];
              this.markersArray.push(this.center)
              this.lnglatInfo.lat = e.lnglat.lat;
              this.lnglatInfo.lng = e.lnglat.lng;
            }
          },
      }
  },
  props: {
    visible: Boolean
  },
  created () {},
  watch: {},
  mounted() {
    this.init()
  },
  methods: {
    // 初始化地图
    init() {
        let _self =this;
        VueAMap.initAMapApiLoader({
          key: _self.mapApiKey,
          plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geocoder'],
          // 高德 sdk 版本
          v: '1.4.15'
      });
    }, 
   
    //点击搜索后触发的事件
      querySearch(pois){
        this.input = document.querySelector('.search-box-wrapper input').value 
        this.center = [pois[0].lng,pois[0].lat]        //选择了第一个值
        this.markersArray = [];    //标记点先清空  
        this.markersArray.push([pois[0].lng,pois[0].lat])   //把搜索的位置的第一个值存入标记中并显示标记点
        this.lnglatInfo.lat = pois[0].lat;
        this.lnglatInfo.lng = pois[0].lng;
      },
    /***
     * 确认，并返回选择的经纬度
     */
    confirm: function () {
      this.$emit('map-confirm', this.lnglatInfo)
    },
    /***
     * 取消
     */
    cancel: function () {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="less" scoped>
.serachinput {
  width: 300px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid #dddee1;
  line-height: 20px;
  font-size: 16px;
  height: 38px;
  color: #333;
  position: relative;
  border-radius: 4px;
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
}
::v-deep .el-dialog__header {
  border-bottom: 0 !important;
}
.search-box{
  width:100%;
  height:40px;
}
::v-deep .el-vue-search-box-container .search-box-wrapper .search-btn{
  background-color: #409eff;
  border-color: #409eff;
  color:#fff;
  width: 70px;
  border-radius: 4px;
}
::v-deep .el-vue-search-box-container .search-box-wrapper input{
  height: 40px;
  line-height: 40px;
  border: 1px solid #dcdfe6;
}
</style>

3.使用方法

<template>
    <div>
        <a-form-model :model="formData" ref="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="经纬度：">
                <a-tag color="blue">
                    经度：{{formData.lng}}
                </a-tag>
                <a-tag color="purple">
                    纬度：{{formData.lat}}
                </a-tag>
                <a-button type="primary" size="small" @click="showAMap">打开地图选择</a-button>
            </a-form-model-item>
        </a-form-model>
    <AMap @cancel="showMap = false" @map-confirm="confirmLocation" :visible="showMap" ></AMap>
    </div>
</template>

<script>
import AMap from "@/pages/mch/components/AMap";

export default {
    name: "demo",
    components:{AMap},
    data() {
        return {
            showMap:false,
             labelCol: { xs: 24, sm: 24, md: 24, lg: 4 },
            wrapperCol: { xs: 24, sm: 24, md: 24, lg: 18 },
            formData:{
                lat:'',
                lng:''
            }
        }
    },
    mounted() {
    },
    created(){
    },
    methods: {
        confirmLocation(e) {
            this.latlng.lat = e.lat
            this.latlng.lng = e.lng
            this.showMap = false
        },
        showAMap(){
            this.showMap = true;
        }
    },
}
</script>
<style lang="less" scoped>
</style>

4.效果

选择前：

打开地图选择:
选择后：