VUE项目中高德地图选择坐标和输入搜索功能

插入高德地图的过程：

1.在HTML 页面中引入高德地图 JS API 的 JS文件
2.获取到 DOM 元素
3.将其作为容器，连同其它参数，传递给 new AMap.Map，创建一个地图实例
5.往地图里加入更多的元素

官方JS API文档地址 https://lbs.amap.com/api/javascript-api/summary/
官方JS API实例地址 https://lbs.amap.com/demo/javascript-api/example/marker/custom-icon-content

一、引入高德地图

1. 申请key

在高德官网，申请key值。

2. index.html文件中加入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key='申请的key&plugin=AMap.PolyEditor,AMap.DistrictSearch,AMap.Autocomplete"></script>   

注意：引入高德的js代码要放在head部分，不能放在尾部，否则会报错： “AMap is not defined”。
3.

二、地图组件渲染

<!--
* @description: 地图搜索选地址，点点位选地址
* @fileName: MapLayouts.vue
* @author: zhanggoudan
* @date: 2021/07/05 09:36:54
* @引入: import MapLayout from "@/components/mapLayouts/MapLayouts.vue";
* @使用: 子组件绑定ref="map"
* @地图获取点位和地址:  1. getMapData(mapData)  地图点击点位自动调用该方法 mapData为点位信息，数据格式:{address, lat, lng}
* @地图设置点位和地址:  2. setMapData  通过父组件调用子组件方法形式设置点位 调用方式 this.$refs.map.setMapData({address, lat, lng});
!-->

<template>
  <div class="maplayouts">
    <input
      id="mapInput"
      class="mapInput"
      v-model="mapData.address"
      v-if="inputVisible"
      placeholder="请输入地址搜索"
    />
    <div class="container" id="map" :style="{ height: height + 'px' }"></div>
  </div>
</template>

<script>
import icon from "@/assets/icon.png";
export default {
  props: {
    // 地图高度
    height: {
      type: Number,
      default: 600,
    },
    // 是否启用搜索框
    inputVisible: {
      type: Boolean,
      default: true,
    },
    // 地图初始化层级
    mapInitZoom:{
      type:Number,
      default:12,
    },
    // 初始化中心点位
    mapInitCenter:{
      type:Array,
      default:function() {
        return [115.988491, 36.477378];
      }
    },
  },
  data() {
    return {
      mapData: {
        address: "",
        lng: "",
        lat: "",
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.initMap();
    },
    //地图绘制
    initMap() {
      this.map = new AMap.Map("map", {
        resizeEnable: true,
        zoom: this.mapInitZoom,
        center: this.mapInitCenter,
        mapStyle: "amap://styles/4886817cd43fb9d6f022ba1b762e3dc3",
      });
      let _that = this;
      // 点击点位
      this.map.on("click", (e) => {
        AMap.service("AMap.Geocoder", function () {
          let geocoder = new AMap.Geocoder({
            city: "", //城市，默认：“全国”
          });

          //地图上所标点的坐标
          var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];

          geocoder.getAddress(lnglatXY, function (status, result) {
            if (status === "complete" && result.info === "OK") {
              let addressinfo = result.regeocode.addressComponent;
              let address =
                addressinfo.city +
                addressinfo.street +
                addressinfo.township +
                addressinfo.streetNumber;
              let lng = e.lnglat.getLng();
              let lat = e.lnglat.getLat();
              _that.setMap({ address, lng, lat });
            }
          });
        });
      });

      if (this.inputVisible) {
        // 输入框选择
        let autoOptions = {
          input: "mapInput",
        };
        let auto = new AMap.Autocomplete(autoOptions);
        AMap.event.addListener(auto, "select", (e) => {
          let address = e?.poi?.name;
          let lng = e?.poi?.location?.lng;
          let lat = e?.poi?.location?.lat;
          _that.setMap({ address, lng, lat });
        });
      }
    },
    // 绘制点位
    setMap({ address, lng, lat }) {
      if (this.marker) {
        this.map.remove(this.marker);
      }
      this.marker = new AMap.Marker({
        icon: icon,
        map: this.map,
        position: [lng, lat],
        offset: new AMap.Pixel(-11.5, -11),
      });
      this.map.setCenter([lng, lat]);
      this.marker.setMap(this.map);
      this.mapData = {
        address,
        lng,
        lat,
      };

      this.getMapData(this.mapData);
    },
    // 地图数据参数传递给父组件
    getMapData(mapData) {
      this.$parent.getMapData(mapData);
    },
    // 父组件调用子组件方法
    setMapData(mapData) {
      this.setMap(mapData);
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 500px;
  position: relative;
  
}
#mapInput {
    height: 35px;
  }
</style>

注意:

	注    意： 	当使用ele ui框架会存在 this.$parent.getMapData is not function 报错问题
	
    解决办法:	将this.$parent.getMapData(mapData) 更改为this.$emit('getMapData',mapData) 
    
    原   因:  	控制台输出this.parent发现找不到自己定义的component的父组件定
    		 	需要通过 this.$parent.$parent.getMapData() 才可以可以调用到.