Vue3頁面配置高德地圖,獲取位置實(shí)踐

更新時(shí)間：2026年01月20日 16:55:25 作者：bug0到1

文章介紹了如何使用高德地圖API進(jìn)行地圖顯示和搜索功能的實(shí)現(xiàn),包括功能介紹、申請高德地圖key的步驟以及Vue頁面和Java后臺(tái)方法的實(shí)現(xiàn)

一、功能介紹

1.1.打開地圖顯示前區(qū)域，并標(biāo)記

1.2.點(diǎn)擊地圖位置，標(biāo)記并方法顯示

1.3.搜索提示，顯示提示數(shù)據(jù)，跳轉(zhuǎn)顯示對應(yīng)位置。

二、申請高德地圖的key

2.1.百度搜索登錄高德地圖平臺(tái)，注冊用戶登錄。

2.2.登錄后，需先認(rèn)證成為開發(fā)者

2.3.在控制臺(tái)中，申請相關(guān)的應(yīng)用，獲取key值

三、Vue頁面

1.1.頁面全部代碼

<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="" prop="">
        <div id="containerMap" style="width: 500px; height: 500px;z-index: 1;position: relative">
          <div class="info" style="z-index: 2;position: absolute">
            <div class="input-item">
              <div class="input-item-prepend">
                <span class="input-item-text" style="width:100px;">請輸入關(guān)鍵字</span>
              </div>
              <input id='tipinput' type="text" v-model="keyword" @input="iptchange()"/>
              <ul>
                <li v-for="(item,index) in (itemsAddress)" :key="index" @click="toAssignAddress(item)">
                  {{item.name}}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitMapForm" type="primary" :disabled="formLoading">確 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">

  import { TakeShopApi, TakeShopVO } from '@/api/takeshop/takeshop'
  import AMapLoader from '@amap/amap-jsapi-loader';
  import { onMounted, onUnmounted } from "vue";
  import axios from "axios";

  /** 地圖 */
  defineOptions({ name: 'MaoForm' })

  const message = useMessage() // 消息彈窗

  const dialogVisible = ref(false) // 彈窗的是否展示
  const dialogTitle = ref('') // 彈窗的標(biāo)題
  const formLoading = ref(false) // 表單的加載中：1）修改時(shí)的數(shù)據(jù)加載；2）提交的按鈕禁用
  const formType = ref('') // 表單的類型：create - 新增；update - 修改
  const keyword = ref('')
  const formData = ref({
    address:undefined,
    longitude:undefined,
    latitude:undefined
  })
  const formRules = reactive({
  })
  const formRef = ref() // 表單 Ref

  let map = null;

  const itemsAddress = ref([])

  onUnmounted(() => {
    map?.destroy();
  });

  /** 打開彈窗 */
  const toMapForm = async (type: string, id?: number) => {
    dialogVisible.value = true
    dialogTitle.value = "地圖"
    formType.value = type
    resetForm()
    newMap()
    // 修改時(shí)，設(shè)置數(shù)據(jù)
    if (id) {
      formLoading.value = true
      try {
        formData.value = await TakeShopApi.getTakeShop(id)
      } finally {
        formLoading.value = false
      }
    }
  }
  defineExpose({ toMapForm }) // 提供 open 方法，用于打開彈窗
  /** */
  function newMap(){
    window._AMapSecurityConfig = {
      securityJsCode: "", // 密鑰
    };
   //key: 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時(shí)必填
   //version: 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
   //plugins: 需要使用的的插件列表，如比例尺'AMap.Scale'等
    AMapLoader.load({
      key: "", 
      version: "2.0", 
      plugins: ['AMap.AutoComplete','AMap.PlaceSearch','AMap.Geocoder'], 
    })
      .then((AMap) => {
        map = new AMap.Map("containerMap", {
          // 設(shè)置地圖容器id
          zoom: 11, // 初始化地圖級(jí)別
          center: [112.144146,32.042426], // 初始化地圖中心點(diǎn)位置NPM
          resizeEnable: true,
        });
        //監(jiān)聽用戶的點(diǎn)擊事件
        map.on('click', e => {
          let lng = e.lnglat.lng
          let lat = e.lnglat.lat
          const marker = new AMap.Marker({
            position: new AMap.LngLat(lng, lat),   // 經(jīng)緯度對象，也可以是經(jīng)緯度構(gòu)成的一維數(shù)組[116.39, 39.9]
            title: ''
          });
          map.clearMap();
          map.add(marker)
          var geocoder = new AMap.Geocoder({
            // city 指定進(jìn)行編碼查詢的城市，支持傳入城市名、adcode 和 citycode
            city: '全國'
          })
          let lnglat = [lng,lat]
          let address = lng +"," +lat
          formData.longitude = lng
          formData.latitude = lat
          toMapAddress(address)
        })

      })
      .catch((e) => {
        console.log(e);
      });
  };

  //搜索
  const iptchange = async () =>{
    var key = ''
    axios({
      methods: 'get',
      url: `https://restapi.amap.com/v3/assistant/inputtips?key=${key}&keywords=${keyword.value}`
    }).then(res => {
      itemsAddress.value = res.data.tips
    })
  }

  //定位
  const toAssignAddress = async (item) => {
    console.log("item",item)
    var geocoder = new AMap.Geocoder({
      // city 指定進(jìn)行編碼查詢的城市，支持傳入城市名、adcode 和 citycode
      city: item.adcode
    })
    var latLngArr =  item.location.split(",");
    var latAddress = new AMap.LngLat(Number(latLngArr[0]), Number(latLngArr[1]),)
    geocoder.getAddress(latAddress, function(status, result) {
      if (status === 'complete' && result.info === 'OK') {
        // result中對應(yīng)詳細(xì)地理坐標(biāo)信息
        //清除之前的標(biāo)記
        map.clearMap();
        const marker = new AMap.Marker({
          position: latAddress,   // 經(jīng)緯度對象，也可以是經(jīng)緯度構(gòu)成的一維數(shù)組[116.39, 39.9]
          title: ''
        });
        map.add(marker)
        map.setCenter(latLngArr);
        map.setFitView()
        let address = Number(latLngArr[0]) +"," +Number(latLngArr[1])
        formData.longitude = Number(latLngArr[0])
        formData.latitude = Number(latLngArr[1])
        toMapAddress(address)
      }
    })
  }

  /** 根據(jù)經(jīng)緯度獲取地址，此處調(diào)用的是后臺(tái)接口*/
  const toMapAddress = async (address) => {
    const data = await TakeShopApi.toMapAddress(address)
    if(data.code == 0){
      formData.address = data.data
    }
  }

  /** 提交地圖 */
  const emit = defineEmits(['getData']) // 定義 success 事件，用于操作成功后的回調(diào)
  const submitMapForm = async () => {
    // 提交請求
    formLoading.value = true
    try {
      dialogVisible.value = false
      // 發(fā)送操作成功的事件
      emit('getData',formData)
    } finally {
      formLoading.value = false
    }
  }

  /** 重置表單 */
  const resetForm = () => {
    formData.value = {
      address:undefined
    }
    formRef.value?.resetFields()
  }
</script>

<style>

</style>

三、Java后臺(tái)方法

1.根據(jù)經(jīng)緯度獲取地址

	@GetMapping("/toMapAddress")
    public CommonResult toMapAddress(@RequestParam(name="address",required = true) String address){
        String queryUrl  = "https://restapi.amap.com/v3/geocode/regeo?output=xml&location=" + address +
                "&key="自己的key"&radius=1000&extensions=all";
        String queryResult = getResponse(queryUrl );
        // 將獲取結(jié)果轉(zhuǎn)為json數(shù)據(jù)
        JSONObject jsonObject = new JSONObject(queryResult);
        JSONObject responseObj = new JSONObject(jsonObject.get("response"));
        JSONObject regeocodeObj = new JSONObject(responseObj.get("regeocode"));
        if (responseObj.get("status").toString().equals("1")) {
            if (regeocodeObj.size() > 0) {
                // 在regeocode中拿到 formatted_address 具體位置
                return success(regeocodeObj.get("formatted_address").toString());
            } else {
                throw new RuntimeException("未找到相匹配的地址！");
            }
        }else{
            return null;
        }
    }

2.http請求高德地圖API

private String getResponse(String queryUrl ) {
        // 用JAVA發(fā)起http請求，并返回json格式的結(jié)果
        StringBuffer result = new StringBuffer();
        try {
            URL url = new URL(queryUrl);
            URLConnection conn = url.openConnection();
            BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream()));
            String line;
            while ((line = in.readLine()) != null) {
                result.append(line);
            }
            in.close();
        } catch (MalformedURLException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return result.toString();
    }