[微信小程序记录] 微信小程序 map居中 map中心定位点不在视图中心（解决方式）

最新推荐文章于 2024-05-05 17:00:00 发布
最新推荐文章于 2024-05-05 17:00:00 发布
阅读量5.5k 收藏 5
点赞数 5
分类专栏： 问题集 文章标签： 微信小程序 map 定位点 视图中心
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/com_study/article/details/89007587
版权

在使用map进行定位时，发现定位点不在视图的中心。如下图情况；
在这里插入图片描述
解决方式：
在这里插入图片描述
将type改为gcj02，完美解决“定位点不在视图中心的问题”。
在这里插入图片描述

wind_sssssssss
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
01-03
本文实例讲述了微信小程序使用map组件实现检索(定位位置)周边的POI功能。分享给大家供大家参考，具体如下： 声明 bug： 页面顶部分类【汽车服务、汽车销售等】列表和页脚的详细地址在真机测试是会出现不显示问题？ 造成原因：在小程序map组件的同一区域，map组件的视图层比普通的文本视图层要高，所以在真机会遮挡！ 解决办法：将该文本视图采用cover-view，放在map中。 感谢： 感谢Lrj_estranged指出问题！ 效果图 实现方法 1. 地图采用微信小程序提供的map组件； 2. 周边的数据坐标点通过高德地图提供的API接口，获取定位位置的周边或者指定位置周边的数据。 WXML
uniapp 微信小程序 地图circle的radius自适应大小且始终在地图中心
树上骑个猴的博客
11-30 3406
<map id="mapId" ref="mapId" style="width: 750rpx; height:calc(100vh - 210rpx);" :circles="circles" :polyline='polyline' :scale="mapScale" :latitude="latitude" :longitude="longitude" :markers="markers" :show-location="true" show-scale=true @regionch.
微信小程序开发之路——地图调用，你得注意的几个坑
HouGISer的博客
08-04 2万+
文章目录现在前头开发工具版本如何调用？几个问题1. 地图组件的大小和定位2. 给地图添加控件3. 地图属性3.1 指南针3.2 比例尺3.3 显示带方向的当前定位点3.4 设置地图初始中心位置3.5 设置地图比例尺3.6 设置地图旋转角度3.7 设置地图倾斜角度3.8 允许3D楼块3.9 允许俯视3.10 允许缩放3.11 允许拖动3.12 允许旋转3.13 开启卫星图3.14 开启实时路况参考网...
微信小程序map组件动态markers
03-29
使用wepy框架，请求回来的数据设置给data里面初始化的markers，使用wx：if在拿到数据后渲染map组件，模拟器上没问题，真机上map组件渲染不出来   本主题由 Rolan 于 2018-10-12 14:17 审核通过       (此图片来源于网络，如有侵权，请联系删除! )       (此图片来源于网络，如有侵权，请联系删除! ) 免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
微信小程序开发——map地图组件，定位，并手动修改位置偏差。
热门推荐
贝尔·格里屌斯的专栏
01-29 9万+
环境搭建 注册，获取APPID（没有这个不能真鸡调试） 下载微信web开发者工具（挺多bug，将就用） 打开微信web开发者工具，扫码登录，新建小程序，输入APPID，勾选创建quick start项目。 工程结构可以看到工程根目录中有个app.js，这里可以定义全局变量，通过getApp()获取。 项目中有了一些示例，已经有了获取用户信息的方法等。 开发地图定位，选择位置功能我们直接修改ind
小程序map拖动地图显示地图中心标记点及经纬度方法
weixin_45940369的博客
02-11 2662
小程序map拖动地图显示地图中心标记点及经纬度方法
小程序地图组件map的使用和地址逆解析
weixin_42649511的博客
07-30 3561
第一次在项目上使用小程序地图组件，摸索过程中也踩了一些坑，在csdn上看了一些博客，特此做个笔记，一是复习，二是给有需要的同志提供一些参考。（选取部分功能，代码片段为项目中截取部分，仅供参考。） 1. 创建map &lt;map id="myMap" class="map_class" longitude="{{userLong}}" latitude="{{userLat}}" scale...
微信小程序 map 点击图标回到自己的位置（不使用controls控件）
飞奔的屎壳郎
10-24 4395
先上效果图： 原由(必看)： 本来微信小程序的map 里面的 controls控件可以轻松实现，但是官方说要废弃了，说采用 cover-view代替，其实就是一个点击事件。用不用cover-view 都可以的。被误导了一个多小时。 用的是就是这一个函数 moveTolocation: function () { var mapCtx = wx.createMapContext(map...
uni-app 微信小程序地图实现点击标记点弹窗
m0_46598549的博客
05-28 3377
在项目需求中偶尔需要在微信小程序的地图中，实现打点，然后点击某个点要能弹出关于这个点的信息，对应信息也要替换，点击关闭或者空白处要关闭弹窗
微信小程序实现地图定位
lwx33912138的博客
02-27 4765
简单实现微信小程序地图定位 wx.getLocation wx.openLocation
微信小程序源码 排队取号，map组件使用(学习版)
06-18
微信小程序源码 排队取号，map组件使用(学习版)微信小程序源码 排队取号，map组件使用(学习版)微信小程序源码 排队取号，map组件使用(学习版)微信小程序源码 排队取号，map组件使用(学习版)微信小程序源码 排队取号...
微信小程序 小程序地图定位 (源码)
05-31
微信小程序 小程序地图定位 (源码)微信小程序 小程序地图定位 (源码)微信小程序 小程序地图定位 (源码)微信小程序 小程序地图定位 (源码)微信小程序 小程序地图定位 (源码)微信小程序 小程序地图定位 (源码)微信小...
微信小程序之搜索框样式（带源码）
m0_59704905的博客
05-05 291
点击搜索框，“请输入搜索内容消失”，可输入关键字。
怎么用微信小程序实现远程控制台球室
tyanzhiqi的专栏
04-30 1133
怎么用微信小程序实现远程控制台球室呢？本文描述了使用微信小程序调用HTTP接口，实现控制台球室，控制球台上方的照明灯，单台设备可控制多张球台的照明灯。
微信小程序实现九宫格
weixin_45465881的博客
04-30 521
更多示例，关注我，分享更多呦~
unaipp推荐算法的汽车租赁系统zaxzu 微信小程序hbuiderx
专注分享bishe530的博客
05-05 239
但是一直以来我国传统的汽车租赁管理并没有建立一套完善的行之有效的汽车租赁管理系统，传统的汽车租赁管理已经无法适应高速发展，无论是从效率还是从效果来看都远远的和预计相差甚多，可以断言，传统的汽车租赁管理模式已经不再适应，甚至已经拖累了发展。系统设计的主要意义在于，一方面，对于平台来讲，系统上线后可以带来很大的便利性，汽车租赁管理属于非常细致的管理模式，要求数据量大，计算机管理可以提高精确性，更为便利的就是信息的查询，大大的提高了工作效率，改善了管理质量；前台不同用户的不同汽车租赁的匹配和选择的实现设计；
Java基于微信小程序+uniapp的校园失物招领小程序（V3.0）
程序员徐师兄的博客
05-01 1322
Java基于微信小程序+uniapp的校园失物招领小程序（V3.0），使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理校园失物招领系统信息，查看校园失物招领系统信息，管理校园失物招领系统。总之，校园失物招领系统集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。关键词：校园失物招领系统；Java语言；Mysql。
微信小程序进阶之路：项目管理与分包加载实战指南
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-05 1280
通过本文的学习，相信你已经掌握了微信小程序的项目管理和分包加载技巧，这对于提升小程序的开发效率和用户体验至关重要。实践是检验真理的唯一标准，不妨动手尝试在你的项目中应用这些策略，感受它们带来的改变。讨论点：在你的小程序开发过程中，有没有遇到过关于项目管理或分包加载的特别挑战？你是如何解决的？或者你有哪些独到的优化技巧愿意与大家分享？欢迎在评论区留言交流，一起探讨微信小程序开发的最佳实践。💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！
微信小程序map定位当前位置
06-23
### 回答1： 微信小程序是一种轻量化的应用程序，可以在微信中直接使用。它具有快速开发、轻便易用等优点。其中，微信小程序map组件可以用于定位当前位置。 首先，在小程序开发工具中添加map组件，可以利用微信提供的API进行对地图的操作。然后，在页面上添加按钮或者其他交互方式，触发定位功能。可以通过微信提供的wx.getLocation接口获取当前地理位置，将其坐标转换为经纬度等信息，再在地图上显示出来。 微信小程序map组件还可以加入自定义的标记点、路线等功能。比如，可以在地图上设置一个目标地点，当用户到达该地点时进行提醒。除此之外，还可以将地图与其他组件联动，实现更多实用性功能。 总之，通过微信小程序map组件定位当前位置可以在很多场景下得到运用，例如共享单车、打车等领域，也为用户带来更加便利和舒适的出行体验。 ### 回答2： 微信小程序的定位功能可以让用户在地图上查看自己的当前位置，并且可以进行定位导航等一系列应用操作。 要使用微信小程序的定位功能，首先需要获取用户的授权。用户可以通过点击相关按钮进行授权，同时小程序需要向用户说明获取授权的作用和用途。 获取授权后，就可以通过小程序调用微信地图API，实现对用户当前位置的定位功能。用户当前位置会在地图上进行标注，并且可以实现定位导航、查询周边信息等功能。 除了获取授权和调用API之外，开发者还需要考虑到用户体验和隐私保护等方面。比如，在页面显示用户当前位置时要注意保护用户隐私，使用合适的地图标识等。 总体来说，微信小程序的定位功能可以方便用户在不同场景下使用地图，同时也增加了小程序的实用性。对开发者而言，需要注意用户隐私和开发规范等方面的问题，以保证用户体验和小程序功能的完善。 ### 回答3： 微信小程序中提供了一种方便的方法，可以使用map组件定位当前位置。这个组件可以用来显示地图和标记位置，还可以选择地图的种类和放大程度。在小程序中，我们只需要在wxml文件中添加map组件，然后在js文件中调用API即可进行位置定位。 首先，我们需要引入wx.getLocation() API，这个API可以获得当前用户的地理位置。通过这个API获得的经纬度信息，我们可以通过地图定位到用户的当前位置。在js文件中添加如下代码，就可以实现定位操作： ``` wx.getLocation({ type: 'gcj02', success(res) { const latitude = res.latitude const longitude = res.longitude const speed = res.speed const accuracy = res.accuracy } }) ``` 其中，type参数可以设置定位方式，gcj02表示国测局加密经纬度坐标，还有其他选项，具体可以查看文档。通过上述代码，我们得到用户的经纬度位置，并可以通过map组件显示在地图上。 ``` <map latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" markers="{{markers}}" show-location="{{true}}" /> ``` 最后，在wxml文件中加入map组件即可。其中，latitude和longitude参数分别表示经纬度位置，scale参数表示显示比例尺，markers参数可以设置地图标记，show-location参数表示是否显示定位标记。 总之，通过微信小程序的map组件和wx.getLocation() API，我们可以轻松实现定位当前位置的操作。这一功能在很多小程序中都会用到，比如地图导航、外卖送餐等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wind_sssssssss

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值