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

腾讯前端定位组件

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,});});},
}

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

vue PC 端使用腾讯地图定位相关推荐

百度地图、高德地图和腾讯地图定位不准确的解决方案
需求由于使用我们公司设备的用户分布在全球各地,最近好多设备都坏了,现在我们公司的修理师要去现场修理设备,但是设备太多了,200多个地址,不好找,而且又不能非常一目了然的查看到分布在全国的需要进行设备 ...
h5/web 原生定位、高德、腾讯地图定位
在项目添加新功能时,使用cdn方式引入使用地图功能,使用功能只用到了地图的定位.点标记.详细地址查询.poi搜索和输入提示.计算两点之间的距离:因为在寻找高德地图问题时发现h5 和 web 端的好少, ...
微信端H5使用百度地图定位获取当前位置安卓定位不准
微信端H5使用百度地图定位获取当前位置安卓定位不准的问题解决如下: 使用微信端定位,签名方法看微信接口文档: <script type="text/javascript"&g ...
vue获取地理位置自动定位---腾讯地图
前两天因为工作需求需要获取地理位置打开腾讯地图定位找到控制台选择新建应用应用名称和类型选择好了后添加key 这里就获取到了定位在vue视图中需要定位的 <div class=&quo ...
记录在Vue项目里面使用腾讯地图
目录前言一.异步引入SDK 1.封装初始化方法. 2.引入并使用. 二.腾讯地图marker使用 1.效果预览 2.代码实现三.在地图上画线并测量距离 1.效果预览 2.代码实现前言本文主要 ...
腾讯地图定位及坐标解析
腾讯地图定位及坐标解析一个项目,需要打开地图后点击获取地址用的腾讯地图开放平台,对着文档花了一上午弄出来了代码: <!DOCTYPE html> <html><he ...
android 集成腾讯地图定位
本文只教学定位功能,需要搜索.2D或3D地图的可以到腾讯地图开发平台看api文档,链接:腾讯地图一.到腾讯地图开发平下载定位sdk,快速入口:腾讯地图定位二.在项目的AndroidManiFest ...
Vue PC端框架和Vue移动端UI框架
Vue PC端框架和Vue移动端UI框架在学习Vue的过程之中,我发现不管是 BAT 大厂,还是创业公司,Vue 都有着广泛的应用,而且框架层出不穷,学习文档也越来越多,Vue也越来越受欢迎.下面是 ...
微信端唤起腾讯地图并进行导航
微信端唤起腾讯地图并进行导航 $('.companyAdress').on('click',function(){ window.location.href= 'http://apis.map. ...

vue PC 端使用腾讯地图定位

vue PC 端使用腾讯地图定位

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

腾讯前端定位组件

解决的方法

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

在vue页面中使用

vue PC 端使用腾讯地图定位相关推荐

最新文章

热门文章