vue项目中获取个人位置信息

获取个人位置信息的软件有很多，但最热门的还是高德，腾讯，......

下面以高德地图为例

1，打开高德开放平台

https://lbs.amap.com/

1.选择JSAPI下的js API

2.并找到该选项（JS API 结合vue使用）

3.找到右上角的控制台进入并按要求注册

4.新建key，tip:您在2021年12月02日以后申请的key需要配合您的安全密钥一起使用。

选择web端）（JSAPi），由于我们的项目是基于js上的则要选择相对应

5.创建完之后返回之前的JS API配合vue选项中去（由于这里只是教学怎么获取位置，里面还可以将自己当前的位置以map地图的方式展现出来，有感兴趣的话可以另外学习）

1.按 NPM 方式安装使用 Loader 

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

2.引入 JS API  Loader 

在地图组件 MapContainer.vue 中引入 amap-jsapi-loader 

vue2中

<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  name: "map-view",
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>

vue3中

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
  AMapLoader.load({
    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });
    })
    .catch((e) => {
      console.log(e);
    });
});

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

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>

这样就可以获取此时你所在位置的经纬度了

然后我们在可以通过地理编码和逆地理编码将经纬度转换成城市省份地区

AMap.plugin('AMap.Geocoder', function() {
  var geocoder = new AMap.Geocoder({
    city: '全国' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
  })

  // 使用geocoder做地理/逆地理编码
})

AMap.plugin('AMap.Geocoder', function() {
  var geocoder = new AMap.Geocoder({
    city: '010' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
  })
 
  var lnglat = [116.396574, 39.992706]

  geocoder.getAddress(lnglat, function(status, result) {
    if (status === 'complete' && result.info === 'OK') {
        // result为对应的地理位置详细信息
    }
  })
})

最后在通过以下方法保证key的安全性（使安全key得以使用）

<div id="container"></div>
<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
</script>
<script
  type="text/javascript"
  src="https://webapi.amap.com/maps?v=2.0&key=你申请的key值"
></script>
<script type="text/javascript">
  //地图初始化应该在地图容器div已经添加到DOM树之后
  var map = new AMap.Map("container", {
    zoom: 12,
  });
</script>