高德导航的组件介入

对于一些项目需要在组件中插入地图，可以选取位置以及经纬度

可以把下面的代码写入到子组件作为弹出的地图demo

<template>
  <div class="amap-ref">
      <div class="amap-cointainer" v-loading="mapLoading">
        <el-row class="amap-row" :gutter="16">
          <el-col :span="19">
            <el-amap-search-box class="amap-ref-search-box" ref="searchBox" :on-search-result="onSearchResult">el-amap-search-box>
          el-col>
          <el-col :span="1" :offset="2" style="padding-top:5px">
            <el-button type="info" @click="confirmClick">确定el-button>
          el-col>
        el-row>
        <el-amap :plugin="shopAmap.plugin" :center="mapCenter" :events="amapEvents()" :zoom="12">
          <el-amap-marker v-for="marker in shopAmap.markers" key="marker" :position="marker" :events="markerEvent()" :draggable="true">el-amap-marker>
        el-amap>
        <el-input v-model="shopAmap.currentMarker.formattedAddress" disabled style="margin-top:1em">el-input>
      div>
  div>
template>
<script>
  import { lazyAMapApiLoaderInstance } from 'vue-amap';

  export default {
    created() {
      lazyAMapApiLoaderInstance.load().then(() => {
        this.geocoder = new AMap.Geocoder({});
        this.GeolocationResult = new AMap.Geolocation();
      });
    },
    watch:{
      value(val){
        this.currentValue = val;
      },
      x(val){
        this.shopAmap.lng = val;
      },
      y(val){
        this.shopAmap.lat = val;
      },
    },
    data() {
      return{
        mapLoading:false,
        name:'',
        currentValue:this.value,//当前的value值
        shopAmap:{
          lat:0,
          lng:0, 
          mapCenter:[116.412267, 39.902825], //地图的中心位置，以什么为中心展示
          markers:[],   //地图上点的展示
          currentMarker:{
            formattedAddress:this.value
          },
          plugin: ['ToolBar','Scale','Geolocation'],
        },
      };
    },
    computed: {
      mapCenter: function () {
        return [this.shopAmap.lng+'',this.shopAmap.lat+''];
      }
    },
    methods:{
    //这是父组件调用的一个子组件方法，用来向子组件传递经纬度和此时的地址
      getOldMap(val){
        this.name=val.name  //多个组件公用一个地图进行修改展示时使用
        this.$refs.searchBox.search()  //清除在地图的下拉选择时展示的模糊列
        this.x=val.latitude
        this.y=val.longitude
        this.value=val.address
        this.shopAmap.markers=[] 
        this.$nextTick(()=>{
          document.getElementsByClassName('search-box-wrapper')[0].getElementsByTagName('input')[0].value=""
          if(val.latitude && val.longitude){
            this.shopAmap.lat = val.longitude;
            this.shopAmap.lng = val.latitude;
            this.shopAmap.currentMarker.formattedAddress=val.address
            this.shopAmap.markers.push([val.latitude,val.longitude]);
          }else{
            this.setMap(val.address)
          }
        })
      },
      setMap(str){
        var that = this;
        var placeSearch= new AMap.PlaceSearch();
        placeSearch.search(str, function(status, result) {
          var pois = [];
          for(var i=0;i<result.poiList.pois.length;i++){
            pois.push(result.poiList.pois[i].location);
          }
          that.onSearchResult(pois);
        });
      },
      confirmClick:function(){
        let mapObj={
          name:this.name,
          formattedAddress:this.shopAmap.currentMarker.formattedAddress,
          latitude:this.shopAmap.markers[0][0],
          longitude:this.shopAmap.markers[0][1],
        }
        this.currentValue = this.shopAmap.currentMarker.formattedAddress;
        this.$emit('input',mapObj);
      },
      generalAddres:function(x,y){
        //根据坐标生成详细地址信息
        var that = this;
        that.shopAmap.markers=[[x,y]];
        //逆地理编码
        var lnglatXY=[x,y];//地图上所标点的坐标
        that.mapLoading=true
        that.geocoder.getAddress(lnglatXY, function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            that.mapLoading=false
            //获得了有效的地址信息:
            that.shopAmap.currentMarker = result.regeocode;
          }else{
            that.mapLoading=false
            //获取地址失败
            console.error('根据坐标获取详细地址失败')
          }
        });
      },
      onSearchResult(pois) {
        let latSum = 0;
        let lngSum = 0;
        if (pois.length > 0) {
          pois.forEach(poi => {
            let {lng, lat} = poi;
            lngSum += lng;
            latSum += lat;
          });
          let center = {
            lng: lngSum / pois.length,
            lat: latSum / pois.length
          };
          //设置地图中心
          this.shopAmap.lng = center.lng;
          this.shopAmap.lat = center.lat;
          //设置显示的maker
          this.shopAmap.markers = [[center.lng, center.lat]];
          this.generalAddres(center.lng, center.lat);
        }
      },
      amapEvents(){
        var that = this;
        return{
          //地图的事件
          click:(current)=>{
            //地图点击事件
            that.generalAddres(current.lnglat.lng,current.lnglat.lat);
          }
        }
      },
      markerEvent(){
        //maker的事件
        var that = this;
        return {
          click:(a,b,c,d)=>{
            //点击事件
          },
          dragend:(current)=>{
            //拖拽完后的事件
            that.generalAddres(current.lnglat.lng,current.lnglat.lat);
          }
        }
      },
    }
  }
 script>

有关地图的参考网址以及地图api

https://elemefe.github.io/vue-amap/#/zh-cn/base/amap