以高德地圖為里，申請(qǐng)key，選擇js api服務(wù)，獲取key和密鑰.

vue2項(xiàng)目代碼引入相關(guān)依賴：

npm i @amap/amap-jsapi-loader -S

封裝成組件:

<template>
  <div>
    <el-row :gutter="15" class="">
      <el-col :span="16">
        <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="right">
          <el-col :span="24">
            <el-form-item label="關(guān)鍵字搜索" prop="wordkey">
              <!-- <el-input v-model="dataForm.kqLocation" placeholder="自動(dòng)帶出" clearable :style="{ width: '100%' }" > -->
                <el-input v-model="input" placeholder="請(qǐng)輸入內(nèi)容" id="tipinput"></el-input>
              </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="地點(diǎn)" prop="kqLocation">
              <el-input v-model="dataForm.kqLocation" placeholder="自動(dòng)帶出" clearable :style="{ width: '100%' }" >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="經(jīng)度" prop="kqLongitude">
              <el-input v-model="dataForm.kqLongitude" placeholder="自動(dòng)帶出" clearable :style="{ width: '100%' }" >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="緯度" prop="kqLatitude">
              <el-input v-model="dataForm.kqLatitude" placeholder="自動(dòng)帶出" clearable :style="{ width: '100%' }" >
              </el-input>
            </el-form-item>
          </el-col> -->
        </el-form>
      </el-col>
      <el-col :span="16">
        <div style="width: 100%">
          <div ref="gaode_Map" id="gaode_Map"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader"; //引入AMapLoader
window._AMapSecurityConfig = {
  // 設(shè)置安全密鑰
  securityJsCode: "xx",
};
export default {
  components: {},
  props: [],
  data () {
    return {
      loading: false,
      visible: false,
      isDetail: false,
      dataForm: {
        kqLocation: undefined,
        kqLongitude: undefined,
        kqLatitude: undefined,
      },
      rules: {},
      input: "",
      map: null,
      auto: null,
      placeSearch: null,
      lnglat: [],
      markers: [],
      position: {},
      form:{},
      address:null,
    };
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {this.initMap() },
  methods: {
    // 地圖初始化
    initMap () {
      let centerLen = [116.397428, 39.90923];
      AMapLoader.load({
        key: "xx", // 申請(qǐng)好的Web端開發(fā)者Key，首次調(diào)用 load 時(shí)必填
        version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
        plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"],
      })
        .then((AMap) => {
          this.map = new AMap.Map("gaode_Map", {
            // 設(shè)置地圖容器id
            viewMode: "3D", //  是否為3D地圖模式
            zoom: 18, // 初始化地圖級(jí)別
            center: centerLen, //中心點(diǎn)坐標(biāo)
            resizeEnable: true,
          });
          this.setMarker(centerLen)
          // 關(guān)鍵字查詢
          this.searchMap();
          // 監(jiān)聽鼠標(biāo)點(diǎn)擊事件
          this.map.on("click", this.clickMapHandler);
        })
        .catch((e) => { });
    },
    // 關(guān)鍵字查詢
    searchMap () {
      // 搜索框自動(dòng)完成類
      this.auto = new AMap.AutoComplete({
        input: "tipinput", // 使用聯(lián)想輸入的input的id
      });
      //構(gòu)造地點(diǎn)查詢類
      this.placeSearch = new AMap.PlaceSearch({
        map: this.map,
      });
      // 當(dāng)選中某條搜索記錄時(shí)觸發(fā)
      this.auto.on("select", this.selectSite);
    },
    //選中查詢出的記錄
    selectSite (e) {
      if (e.poi.location) {
        this.lnglat = e.poi.location;
        this.placeSearch.setCity(e.poi.adcode);
        this.placeSearch.search(e.poi.name); //關(guān)鍵字查詢
        let geocoder = new AMap.Geocoder({});
        let that = this;
        geocoder.getAddress(this.lnglat, function (status, result) {
          if (status === "complete" && result.regeocode) {
            var province = result.regeocode.addressComponent.province;
            var city = result.regeocode.addressComponent.city;
            //自己想要賦的值，根據(jù)自己的做修改
            that.$set(that.form, "province", province);
            that.$set(that.form, "city", city);
            that.$set(that.form, "address", e.poi.name);
            that.$set(
              that.form,
              "coordinate",
              // e.poi.location.lng + "," + e.poi.location.lat
              e.poi.location[0]+","+ + e.poi.location[1]
            ); //緯度，經(jīng)度
          } else {
          }
        });
      } else {
        this.$message.error("查詢地址失敗，請(qǐng)重新輸入地址");
      }
    },
    // 點(diǎn)擊地圖事件獲取經(jīng)緯度，并添加標(biāo)記
    clickMapHandler (e) {
      this.dataForm.kqLongitude = e.lnglat.getLng();
      this.$emit('longitude', this.dataForm.kqLongitude)
      this.dataForm.kqLatitude = e.lnglat.getLat();
      this.$emit('latitude', this.dataForm.kqLatitude)
      this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
      this.setMarker(this.lnglat);
      // 點(diǎn)擊地圖上的位置，根據(jù)經(jīng)緯度轉(zhuǎn)換成詳細(xì)地址
      let geocoder = new AMap.Geocoder({});
      let that = this;
      geocoder.getAddress(this.lnglat, function (status, result) {
        if (status === "complete" && result.regeocode) {
          that.dataForm.kqLocation = result.regeocode.formattedAddress;
          that.$emit('address', that.dataForm.kqLocation)
          that.address=that.dataForm.kqLocation;
        } else {
        }
      });
      this.position = {
        longitude: e.lnglat.getLng(),
        latitude: e.lnglat.getLat(),
        address: that.address,
      };
      this.input = that.address; //把查詢到的地址賦值到輸入框
    },
    //  添加標(biāo)記
    setMarker (lnglat) {
      this.removeMarker();
      let marker = new AMap.Marker({
        position: lnglat,
      });
      marker.setMap(this.map);
      this.markers.push(marker);
    },
    // 刪除之前后的標(biāo)記點(diǎn)
    removeMarker () {
      if (this.markers) {
        this.map.remove(this.markers);
      }
    },
  },
};
</script>


<style lang="scss">
.search_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;

  .label {
    color: #000;
    width: 100px;
  }
}

.content {
  position: relative;
}

#panel {
  position: absolute;
  top: 50px;
  right: 20px;
}

#gaode_Map {
  overflow: hidden;
  width: 100%;
  height: 340px;
  margin: 0;
}

.amap-sug-result {
  z-index: 2999 !important;
}
</style>

頁面引用:

import amap from '@/components/Amap/index'

  components:{amap},



<el-form-item label="地址" prop="address">
        <el-input v-model="form.address" placeholder="請(qǐng)輸入地址" />
      </el-form-item>
      <el-form-item label="經(jīng)度" prop="longitude">
        <el-input v-model="form.longitude" placeholder="請(qǐng)輸入經(jīng)度" />
      </el-form-item>
      <el-form-item label="緯度" prop="latitude">
        <el-input v-model="form.latitude" placeholder="請(qǐng)輸入緯度" />
      </el-form-item>
      <el-form-item label="">
        <amap @address="getAddress" @longitude = "getLongitude" @latitude = "getLatitude"></amap>
      </el-form-item>



#子組件選擇賦值給父組件的屬性

getAddress(data){
      this.form.address = data;
    },
    getLongitude(data){
      this.form.longitude = data;
    },
    getLatitude(data){
      this.form.latitude = data;
    },

文章來源地址http://www.zghlxwxcb.cn/news/detail-809272.html

到了這里，關(guān)于vue2嵌入高德地圖選擇地址后顯示地址和經(jīng)緯度的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！