[202410]整理Vue3使用浏览器获取经纬度（JS+百度地图API+高德地图API）

原创已于 2025-01-20 14:41:31 修改 · 1.9k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ecmascript

于 2024-10-09 14:07:22 首次发布

0. 创建一个空vue项目

npm create vite
> vite-project
> vue 
> javascript

cd vite-project
npm i 
npm run dev

然后把./src/components/HelloWorld.vue清空，用这个文件来做演练场

1. 使用原生JavaScript进行定位

此方法在npm run dev下无法正常运行显示，需要build后，使用Nginx等部署后才能显示。
点击按钮后浏览器会想你询问“xxx想要了解你的位置”，需要点击允许。
由于前面创建项目时使用的语言是typescript，请注意导入问题

<template>
  <button @click="hellojsworld()">获取Javascript定位</button>
  <p> 结果：<span id="jsdemo"></span> </p>
</template>

<script setup lang="js">
//注意，这里是使用js编写的，但是测试的vite应用是使用ts创建的，可能会出现导入问题
//注意，这里是使用js编写的，但是测试的vite应用是使用ts创建的，可能会出现导入问题
//注意，这里是使用js编写的，但是测试的vite应用是使用ts创建的，可能会出现导入问题
function hellojsworld() {
  // npm run dev下无法正常运行显示，需要npm run build后，并且放到nginx或liveServer里才能正常显示
  var x = document.getElementById("jsdemo");
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    x.innerHTML = '当前浏览器不支持地理定位';
  }
  // 获取定位成功，显示位置信息
  function showPosition(position) {
    const text = 'Latitude(纬度): ' + position.coords.latitude + '<br>Longitude(经度): ' + position.coords.longitude;
    console.log(text)
    x.innerHTML = text
  }
  // 获取定位失败，显示错误信息
  function showError(error) {
    switch (error.code) {
      case error.PERMISSION_DENIED:
        x.innerHTML = '用户拒绝地理定位请求';
        break;
    }
  }
}
</script>

2. 使用百度地图API

支持在npm run dev下执行，可能要等几秒钟
点击按钮后浏览器会想你询问“xxx想要了解你的位置”，需要点击允许。

首先要在项目根目录index.html 顶部的<head></head>添加引用，并且ak需要替换成你自己在百度开发者那申请的ak。

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak= 此处替换成你的ak "></script>

然后在HelloWorld.vue修改

<template>
  <button @click="helloBaiduWorld()">获取百度定位</button>
  <p> 结果：<span ref="bddemo"></span> </p>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const bddemo = ref(null)
function helloBaiduWorld() {
  //支持在npm run dev下执行，可能要等几秒钟
  //@ts-ignore
  const geolocation = new window.BMap.Geolocation();

  geolocation.getCurrentPosition(function (this: any, e: any) {
    //@ts-ignore
    if (this.getStatus() == window.BMAP_STATUS_SUCCESS) {
      const text = '纬度：' + e.point.lat + '<br/>经度：' + e.point.lng
      //@ts-ignore
      bddemo.value.innerHTML = text
      console.log(text)
    } else {
      console.log('failed' + this.getStatus())
    }
  });
}
</script>

3. 使用高德地图API获取经纬度

npm run dev下无法正常运行显示，需要build后才能显示
点击按钮后浏览器会想你询问“xxx想要了解你的位置”，需要点击允许。

首先要在根目录index.html 顶部的<head></head>添加引用，并且key需要替换成你在高德地图那申请的key。

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key= 此处替换成你的key"></script>

然后在HelloWorld.vue修改

<template>
  <button @click="helloGDWorld()">获取高德定位</button>
  <p> 结果：<span ref="gddemo"></span> </p>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// npm run dev下无法正常运行显示，需要build后才能显示
const gddemo = ref(null)
function helloGDWorld() {
  //@ts-ignore
  window.AMap.plugin('AMap.Geolocation', function () {
    //@ts-ignore
    var geolocation = new window.AMap.Geolocation({
      // 是否使用高精度定位，默认：true
      enableHighAccuracy: true,
      // 设置定位超时时间，默认：无穷大
      timeout: 10000,
      //@ts-ignore 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
      buttonOffset: new AMap.Pixel(10, 20),
      // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      zoomToAccuracy: true,
      // 定位按钮的排放位置,  RB表示右下
      buttonPosition: 'RB'
    })

    geolocation.getCurrentPosition()
    //@ts-ignore
    window.AMap.event.addListener(geolocation, 'complete', onComplete)
    //@ts-ignore
    window.AMap.event.addListener(geolocation, 'error', onError)

    function onComplete(data: any) {
      // data是具体的定位信息
      const text = '纬度：' + data.position.lat + '<br/>经度：' + data.position.lng
      //@ts-ignore
      gddemo.value.innerHTML = text
      console.log(data)
    }

    function onError(data: any) {
      // 定位出错   
      console.log(data)
    }
  })
}
</script>

4. 3种都放一起

<template>
  <div style="display: flex;flex-direction: row;">
    <section>
      <button @click="hellojsworld()">获取Javascript定位</button>
      <p> 结果：<span id="jsdemo"></span> </p>
    </section>
    <section>
      <button @click="helloBaiduWorld()">获取百度定位</button>
      <p> 结果：<span ref="bddemo"></span> </p>
    </section>
    <section>
      <button @click="helloGDWorld()">获取高德定位</button>
      <p> 结果：<span ref="gddemo"></span> </p>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
///////////////////////////////////////////////////////////////////////////////////
function hellojsworld() {
  //参考文献https://blog.youkuaiyun.com/ks2686/article/details/124031403
  // npm run dev下无法正常运行显示，需要build后才能显示
  //若使用ts，此处会产生很多警告，需要手动//@ts-ignore
  var x = document.getElementById("jsdemo");
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    //@ts-ignore
    x.innerHTML = '当前浏览器不支持地理定位';
  }
  // 获取定位成功，显示位置信息
  //@ts-ignore
  function showPosition(position) {
    //@ts-ignore
    x.innerHTML =
      'Latitude(纬度): ' + position.coords.latitude + // 纬度
      '<br>Longitude(经度): ' + position.coords.longitude; // 经度
  }
  // 获取定位失败，显示错误信息
  //@ts-ignore
  function showError(error) {
    switch (error.code) {
      case error.PERMISSION_DENIED:
        //@ts-ignore
        x.innerHTML = '用户拒绝地理定位请求';
        break;
    }
  }
}
///////////////////////////////////////////////////////////////////////////////////
const bddemo = ref(null)
function helloBaiduWorld() {
  //首先要去index.html（vite一般放在根目录，其他的可能会放在/public/index.html）的<head></head>标签内添加引(AK换成你的）：
  /* <script  type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=   %%% 换成你的AK %%%   "/>*/
  //支持在npm run dev下执行，可能要等几秒钟
  //@ts-ignore
  const geolocation = new window.BMap.Geolocation();

  geolocation.getCurrentPosition(function (this: any, e: any) {
    //@ts-ignore
    if (this.getStatus() == window.BMAP_STATUS_SUCCESS) {
      // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
      const text = '纬度：' + e.point.lat + '<br/>经度：' + e.point.lng
      //@ts-ignore
      bddemo.value.innerHTML = text
      console.log(text)
    } else {
      console.log('failed' + this.getStatus())
    }
  });
}
///////////////////////////////////////////////////////////////////////////////////
const gddemo = ref(null)
function helloGDWorld() {
  //@ts-ignore
  window.AMap.plugin('AMap.Geolocation', function () {
    //@ts-ignore
    var geolocation = new window.AMap.Geolocation({
      // 是否使用高精度定位，默认：true
      enableHighAccuracy: true,
      // 设置定位超时时间，默认：无穷大
      timeout: 10000,
      // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
      //@ts-ignore
      buttonOffset: new AMap.Pixel(10, 20),
      //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      zoomToAccuracy: true,
      //  定位按钮的排放位置,  RB表示右下
      buttonPosition: 'RB'
    })

    geolocation.getCurrentPosition()
    //@ts-ignore
    window.AMap.event.addListener(geolocation, 'complete', onComplete)
    //@ts-ignore
    window.AMap.event.addListener(geolocation, 'error', onError)

    function onComplete(data: any) {
      // data是具体的定位信息
      const text = '纬度：' + data.position.lat + '<br/>经度：' + data.position.lng
      //@ts-ignore
      gddemo.value.innerHTML = text

      console.log(data)
    }

    function onError(data: any) {
      // 定位出错   
      console.log(data)
    }
  })
}
</script>

<style lang="scss"></style>

运行结果（已经build，并且放到Nginx中）：
测试结果
更新记录：
2025-01-20添加说明、
参考文献
[1]: https://blog.youkuaiyun.com/ks2686/article/details/124031403
[2]: https://blog.youkuaiyun.com/m0_59232123/article/details/122435626
[3]: https://developer.amap.com/api/javascript-api/guide/services/geolocation