vue PC 端使用腾讯地图定位

需求：希望网站显示当前城市

腾讯前端定位组件

key的申请，参照官网的方法
官网示例中的参数：
key:"OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", refer:"location"
官网给出三种方法，可自行进行测试，

问题：我在电脑上(Mac电脑chrome 浏览器)获取IP定位不准确，有时只能到省级别，需求想要显示城市级别，浏览器直接查看代码，发现iframe里已经获取到城市，但就是接收不到，浏览器地址栏还一直显示地址图标，我用百度的就没有这个情况，只好继续查找了。

解决的方法

个人是要用的vue上的，直接上使用的代码

定义一个文件，加载定位js

tcmap.js

export default {
  init: function (key, refer) {
    const TMap_URL = `https://apis.map.qq.com/tools/geolocation/min?key=${key}&referer=${refer}&callback=onLocationCallback`;
    return new Promise((resolve, reject) => {
      // 如果已加载直接返回
      if (typeof window.qq !== "undefined") {
        resolve(new window.qq.maps.Geolocation(key, refer));
        return true;
      }
      // 地图异步加载回调处理
      window.onLocationCallback = function () {
        resolve(new window.qq.maps.Geolocation(key, refer));
      };
      // 插入script脚本
      let scriptNode = document.createElement("script");
      scriptNode.setAttribute("type", "text/javascript");
      scriptNode.setAttribute("src", TMap_URL);
      document.body.appendChild(scriptNode);
    });
  },
};

在vue页面中使用

// 导入定位组件
import TMap from "@/utils/tcmap.js";
export default {
  name: "index",
    mounted() {
    this.getUserProfile();
    let that = this;
    TMap.init("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "location").then(function (
      geo
    ) {
      console.log("加载完成");
      geo.getIpLocation(
        function success(position) {
          console.log("pos", position);
          that.city = position.city;
        },
        function error(result) {
          console.log("获取定位失败", JSON.stringify(result));
        },
        {
          timeout: 1000,
          failTipFlag: true,
        }
      );
    });
  },
}

终于解决了，导航栏也没有那个定位标记了，记录一下，下次不跳坑