腾讯地图选点组件组件显示错乱问题排查

最新推荐文章于 2023-12-01 15:02:30 发布
原创 最新推荐文章于 2023-12-01 15:02:30 发布 · 725 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#腾讯地图

本文介绍了一次使用腾讯地图H5选点组件时遇到的问题：地图组件内容错乱。经过排查发现这一现象是由浏览器缩放导致的，并分享了解决思路。

在h5端引入腾讯地图选点组件地图组件 | 腾讯位置服务，按文档采用第一种iframe方式引入，之前一直是好的，突然有一天组件显示内容错乱了，如下图：

排查许久，发现是浏览器缩放导致。 

vue3接入腾讯地图后遇到的错位问题探究
峰会路转的博客
09-30 1191
静下心来想想，不对啊，接口数据没问题，不是后台的事，那尼玛甩不了锅了，我还能安心吃饭睡觉吗啊，于是一番百度，没有这个问题，我就问就没人遇到过这个问题吗，一条相关资料都没有啊，惨惨惨~~~但是，然而，构建上线后就让人摸不着头脑了，进入编辑页面的时候，地图出现了，如下效果，css错位了，他就错位了，防不胜防的那么一下啊~~~排查了大半天，终于没白忙活了~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~对，没看错，上线后就是这样了，中间空白了一大片，地图往下面跑了，不知道就这么抽风了。
腾讯地图 选址组件（地图选点）
Cynthia_Yue27的博客
11-23 5545
腾讯地图组件文档 url方式调用 url例如：https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=http://3gimg.qq.com/lightmap/components/locationPicker2/back.html&key=yourkey&referer=myapp 配置好key以及其他参数，vue页面中跳转就可以到腾讯地图的页面了 遇到的问题： 进入后能定位到当前位置，但显示 获取消
UNIAPP中腾讯地图选点组件和wx.getLocation配合使用，实现定位当前位置，并获取当前位置信息。
weixin_62353876的博客
09-09 2583
页面1点击一个按钮之后，跳转到页面2（地图选取地址页面）进行位置的选取，然后在页面1中将信息获取到再进行使用。就说到这吧，一上午就写了这个，不管清不清楚，不要喷我，我就是这么实现的，不明白的可以加我微信：pw1443445235，我也要上班，回复不及时勿怪。我是放在文件的这个位置，待会再页面中需要进行引入（反正需要引入，应该放在哪都没关系，我也是查资料看别人放这里，我也就放这里了）不要怀疑，这就是真实的页面效果（具体的使用细节去看官方文档的，比我说的清楚。写的虽然粗糙，但是纯纯干货啊兄弟！
腾讯地图h5集成android定位不准,使用jssdk获取的坐标，在腾讯地图上显示，为什么会出现很大的偏差？...
weixin_28740399的博客
05-26 1106
使用微信公众号的JSSDK 获取当前坐标，在腾讯地图(javascript api GL)显示，出现很大的偏差，如何解决？代码如下：wx.getLocation({type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: function (res) {var latitude = res.lati...
使用腾讯地图定位组件不准的问题【不是ifram版，小程序也可以使用】
优快云_yhb0709的博客
12-01 1946
腾讯地图的定位组件有误差解决方法
【解决】Android 腾讯地图 选点定位组件，获取当前位置有偏差所遇到的坑！！
LXB-89
10-29 5183
解决方案一: 获取当前位置有偏差只能到市？可以先定位获取经纬度，然后把经纬度拼接到链接中即可 https://blog.youkuaiyun.com/yechaoa/article/details/88893785#commentsedit 解决方案二：但还发现网络定位和wife定位到的位置偏差也不一样，偏差也很大？查阅发现，位置偏差跟是否在 webvivew 开启定位权限有关，可尝试集成腾讯X5w...
vue+地图选点组件（百度地图）
08-10
本组件是用于在地图上选点、回显坐标等
vue/react高德地图选点组件（坐标拾取工具）
05-30
例如，地图加载速度、选点操作的流畅度、以及界面的友好性都是需要重点考虑的问题。此外，为了使得组件更加通用和复用，开发者会将组件设计得尽量灵活，支持多种配置选项，以适应不同的应用场景和需求。 随着组件的...
仿微信发送位置、地图选点(高德地图)
12-29
在Android开发中，实现类似微信发送位置和地图选点功能是一项常见的需求，这涉及到地图API的集成和地理定位服务的运用。在这个项目中，开发者使用了高德地图API来完成这个功能。高德地图是中国领先的数字地图提供商...
腾讯地图坐标拾取器(原创)
03-07
腾讯地图api和layui结合实现的腾讯地图坐标拾取器 可回调选择结果 layui.config({ base: './' }).use(["addrHelper"], function() { const addrHelper = layui.addrHelper const layer = layui.layer // 打开坐标...
腾讯地图 地图选点组件报错:Cannot read property formatted_addresses of undefined的解决
weixin_42405223的博客
05-23 7784
./css/ //3gimg.qq.com/lightmap/components/locationPicker2/css/ 背景 新能源充电项目 后台需要搞个充电桩经纬度选取的基本功能…懒死,找现成先… 找找-----------------呃.地图选点组件 http://lbs.qq.com/webApi/component/componentGuide/componentPicker 好像能用… 用吧… 懒死我得了 问题 什么鬼… TXMAP前端快出来背锅 先给结论 如图: 腾讯位置服务逆地址解
微信小程序 ‘腾讯位置服务地图选点插件申请失败’
killerdoubie的博客
03-29 5353
微信小程序 ‘腾讯位置服务地图选点插件申请失败’
腾讯地图选址组件
Wnig's Blog
04-22 2987
最近做的微信移动端项目，刚好有选地址的功能，就用了腾讯地图的选址组件 通过iframe内嵌调用没有弹出地理位置授权框，需要自己调用微信地理位置授权，获取到当前经纬度，赋值给lat和lng就可以了，这里写的是默认的经纬度。之前用的是backurl调用的，会跳转页面，需要把有些数据放url上带过去再带回来，很麻烦，后面改用iframe <div @click="selMap">选择地址: ...
腾讯位置服务的地图组件选点组件
weixin_53966813的博客
06-28 1108
在做地图的时候有个需求是自动定位到我传进去的地址信息,发现官方文档说的好像没有关于这点的内容,故来此记录一下。因为我自己的做的是iframe调用方式,故而这里讲的就是iframe调用方式的解决方案.如想要地图组件默认定位到自己当前传进去的位置时,想要传入经纬度;
定位出错可能是iframe惹的祸
Demy_sunny的博客
08-21 1078
定位获取不到时试试切换进框架 driver.switch_to.frame("框架id或者name")
微信小程序接入第三方插件腾讯位置服务地图选点
在无知中学习，在学习中成长，在成长中学习
08-31 1617
微信小程序分享中文乱码 decodeURIComponent(options.name)
腾讯地图api web端常见问题介绍
weixin_37839390的博客
06-15 3776
腾讯地图api（腾讯位置服务api）web端常见问题介绍 腾讯位置服务网址：https://lbs.qq.com/ 1、Javascript API GL（以下简称GL）：GL是下一代基础地图API，底层渲染基于WebGL技术，致力于为用户提供更酷炫的三维效果。除了接口与v2版本有细微差别，还提供3D视角、室内地图、个性化地图等功能，以及更优化的渲染效果和更流畅的交互体验。 常见问题指引： （1）GL如何引入？ https://lbs.qq.com/webApi/javascriptGL/glGuide/g
[微信小程序]小程序引入腾讯地图选点插件出现：未取得授权
iChangebaobao的博客
06-10 7384
问题：小程序引入腾讯地图选点插件出现：未取得授权 首先在微信小程序引入腾讯地图选点插件有官方文档 1、微信小程序接入腾讯地图服务，申请Key 2、在 app.json 中添加 "plugins": { "chooseLocation": { "version": "1.0.3", "provider": "wx76a9a06e5b4e693e" } }, "permission": { "scope.userLocation": { "d
Uni-Appmap组件地图选点问题，不显示或者地点有偏差
m0_61923634的博客
04-06 2306
map组件报错：[Component] : latitude 字段取值有误，纬度范围应为 -90 ~ 90
uniapp调用腾讯地图map组件实现长按选点
最新发布
10-19
虽然给定引用中未直接提及使用 uniapp 调用腾讯地图 map 组件实现长按选点功能的方法，但结合常见开发思路，可以提供以下实现步骤及示例代码： ### 实现步骤 1. **准备工作**：在项目全局常量中加入腾讯地图接口的根域名和注册生成的 Key，同时在小程序管理后台设置合法的 request 域名 [^3][^4]。 2. **引入腾讯地图 map 组件**：在页面的 template 中添加腾讯地图 map 组件。 3. **监听长按事件**：在 map 组件上绑定 `@longpress` 事件，当用户长按地图时触发相应的处理函数。 4. **获取长按位置**：在处理函数中，通过事件对象获取长按位置的经纬度信息。 ### 示例代码 ```vue <template> <view> <!-- 腾讯地图 map 组件 --> <map id="myMap" :latitude="latitude" :longitude="longitude" :scale="scale" @longpress="onMapLongPress" style="width: 100%; height: 500px;" ></map> </view> </template> <script> export default { data() { return { // 初始纬度 latitude: 30.0000, // 初始经度 longitude: 120.0000, // 地图缩放级别 scale: 16 }; }, methods: { // 地图长按事件处理函数 onMapLongPress(e) { // 获取长按位置的经纬度 const { latitude, longitude } = e.detail; console.log('长按位置的纬度：', latitude); console.log('长按位置的经度：', longitude); // 可以在这里进行后续操作，如标记选点位置等 } } }; </script> <style> /* 可根据需要添加样式 */ </style> ``` ### 代码解释 - **template 部分**：使用 `map` 组件展示腾讯地图，设置了初始的经纬度和缩放级别，并绑定了 `@longpress` 事件。 - **script 部分**：在 `data` 中定义了地图的初始经纬度和缩放级别，在 `methods` 中定义了 `onMapLongPress` 方法，用于处理地图长按事件。在该方法中，通过事件对象 `e.detail` 获取长按位置的经纬度信息，并进行相应的处理。 ### 注意事项 - 确保已经完成了腾讯地图的相关配置，包括申请 Key 和设置合法域名。 - 根据实际需求调整地图的初始经纬度和缩放级别。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值