H5移动端 引入高德地图（获取经纬度与地址带搜索反选

index.html引入JS 自己申请KEY哦
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0250860ccb5953fa5d655e8acf40ebb7&plugin=AMap.Geocoder"></script>

    <!-- <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.5&key=e85674d8a91481719a16c2ccda50b51b&plugin=AMap.Geocoder"></script> -->



<template>
  <div id="rootMap">
    <div id="map"
         ref="map"></div>
    <input class="inputclass"
           v-model="address"
           placeholder="请输入地址" />
    <div class="box">
      <van-button type="primary"
                  native-type="button"
                  @click="geocoder()">搜索</van-button>
      <van-button type="primary"
                  native-type="button"
                  @click="SendLngLat()">确定</van-button>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
// import BMap from "BMap";

export default {
  data () {
    return {
      timer: null,
      map: "",
      searchKey: "河南省信阳市",
      currentLonLat: [],
      address: "",
      lnglat: '',
    };
  },
  watch: {

  },
  mounted () {
    this.getMap();
  },

  methods: {

    getMap () {
      //创建地图
      this.map = new AMap.Map("map", {
        //mapStyle: 'amap://styles/grey',
        zoom: 13,
        center: [114.119, 32.116]
      });
      //地图点击事件
      this.map.on("click", this.showInfoClick);

    },
    showInfoClick (e) {
      this.map.clearMap();//清理地图
      let lng = e.lnglat.getLng(); //获取经度
      let lat = e.lnglat.getLat(); //获取纬度

      console.log(e, lng, lat);

      this.regeocoder([lng, lat])
      //marker点
      let marker = new AMap.Marker({
        position: [lng, lat],
        offset: new AMap.Pixel(-13, -30)
      });
      this.map.add(marker); //加载点
      this.map.setFitView(); //缩放至地图
      this.lnglat = lng + "," + lat;//将经纬度绑定至input输入框

    },

    // 通过经纬度获取地址
    regeocoder (loc) { //逆地理编码
      console.log(loc);
      var that = this
      var geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: "all"
      });
      geocoder.getAddress(loc, function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          console.log(result);

          var address = result.regeocode.formattedAddress; //返回地址描述
          that.address = address
          that.currentLonLat = [...loc, address];
          console.log(that.currentLonLat);

        }
      });
    },

    //搜索按钮事件 通过地址获取经纬度
    geocoder () {
      console.log(this.address);
      this.map.clearMap();
      var that = this
      var myGeo = new AMap.Geocoder();
      //地理编码,返回地理编码结果
      myGeo.getLocation(this.address, function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
          //地址解析成功
          // var address = data.regeocode.formattedAddress;
          var x = result.geocodes[0].location.lng;
          var y = result.geocodes[0].location.lat;
          that.currentLonLat = [x, y, that.address];

          console.log(that.currentLonLat);

          that.getMap(x, y);
          // that.regeocoder(XY);
          that.punctuation(x, y); //更新标记
        } else {
          //地址解析失败
          alert("地址不存在")
        }
      });
    },

    // 标记点
    punctuation (x, y) {
      let marker = new AMap.Marker({
        position: [x, y],
        offset: new AMap.Pixel(-13, -30)
      });
      this.map.add(marker); //加载点
      this.map.setFitView(); //缩放至地图
    },

    //点击确定后把经纬度传给父vue
    SendLngLat () {
      console.log(this.currentLonLat.length);
      if (this.currentLonLat.length > 0) {
        this.$emit("SendLngLat", this.currentLonLat);
      } else {
        Toast("请点击地图上的点获取坐标！");
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#rootMap {
  height: 100%;
  width: 100%;
  position: relative;
}
#map {
  height: 100%;
  width: 100%;
  position: relative;
}
.inputclass {
  position: absolute;
  width: 180px;
  height: 30px;
  top: 0;
  left: 0;
  font-size: 14px;
}

.box {
  position: absolute;
  left: 0;
  top: 40px;
}
</style>



	以下为父组件的组件引入

    <GaodeMap @SendLngLat="SendLngLat"></GaodeMap>

    // 接受从子组件传过来的值
    SendLngLat (data) {
      this.currentLonLatList = data;
      // console.log(this.currentLonLatList);

      if (this.currentLonLatList.length) {
        this.formInfo.data.sewerageUserAddress = this.currentLonLatList[2];
        this.formInfo.data.lon = this.currentLonLatList[0];
        this.formInfo.data.lat = this.currentLonLatList[1];
        this.showType6 = false;
      }
      // console.log(this.ruleform);
    },