高德地址和百度地图获取当前定位（ip精准定位）

一、高德地图

1、创建一个高德应用key

安全密钥和key需要在高德开放平台创建一个应用，添加一个key，服务平台选择web端（JS API）

key创建好之后就可以获取到key和安全密钥

2、npm引入插件

// npm引入插件
npm i @amap/amap-jsapi-loader --save

3、使用geolocation.getCurrentPosition获取定位（ ip精准定位失败率较高，失败后获取城市定位（普通ip定位）作为备用项）

// amp.js
import AMapLoader from "@amap/amap-jsapi-loader";
export function AMap() {
    window._AMapSecurityConfig = {
      securityJsCode: "", // 安全密钥
    };
    AMapLoader.load({
      key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    }).then((AMap) => {
      AMap.plugin("AMap.Geolocation", function () {
        const geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset: new AMap.Pixel(10, 20),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: "RB",
        });
        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            onComplete(result);
          }
          if (status == "error") {
            onError(result);
          }
        });
        function onComplete(data) {
          console.log(data);
          // data是具体的定位信息
        }
        function onError(data) {
          console.log(data);
          // data是具体的定位信息
          
          getCityInfo();// ip精准定位失败后获取城市定位（普通ip定位）
        }
		function getCityInfo() {
          // ip精准定位失败后获取城市定位（普通ip定位）
          geolocation.getCityInfo(function (status, result) {
            if (status == "complete") {
              onCityComplete(result);
              resolve();
            }
            if (status == "error") {
              onCityError(result);
              reject();
            }
          });
          function onCityComplete(data) {
            console.log("城市定位数据：", data);
            // data是具体的定位信息
          }
          function onCityError(data) {
            console.log("城市定位错误信息：", data);
            // data是具体的定位信息
            ElMessage.error(`获取定位失败，失败原因：${data.message}`);
          }
        }
      });
  });
}

在获取成功的方法中可把位置信息保存在localstorage中，需要使用的页面引入amp.js的AMap方法并使用即可

注意：网页访问地址是需要使用安全来源，比如：localhost或者https，使用http会报错。

二、百度地址获取定位

1、百度地图的key需要自己在百度地图开放平台创建的key，应用类型选:浏览器端

2、创建一个js文件：bmp.js，引入百度地图，内容如下：

// bmp.js
export function BMap() {
  return new Promise(function (resolve, reject) {
    window.init = function () {
      // eslint-disable-next-line
      resolve(BMapGL);
    };
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的key&callback=init`;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

3、在需要获取定位的页面引入bmp.js,并使用

// 引入bmp.js
import { BMap } from "@/bmp.js";

// 获取定位方法
const get_loc = async () => { 
BMap()
    .then((BMapGL) => {
      var geolocation = new BMapGL.Geolocation();
      // 开启SDK辅助定位
      geolocation.enableSDKLocation();
      geolocation.getCurrentPosition(function (r: any) {
        console.log("位置信息：", r?.latitude, r?.longitude);
      });
    })
    .catch((err) => {
      console.log(err);
      ElMessage.error("访问地址经纬度接口失败，请重试");
    });
}