2022-01-21 微信小程序-萌宠大作战项目(二) 小程序项目中使用map组件:默认移动到当前位置

原创 已于 2022-11-04 18:51:12 修改 · 794 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #微信小程序 #前端 #map

于 2022-01-21 21:34:06 首次发布
本文介绍了如何在微信小程序中利用wx.getLocation获取当前地理位置，并结合map组件的moveToLocation方法，实现地图默认显示用户当前位置的功能。详细探讨了相关API的使用和配置要求。

文章目录

1.wx.getLocation(obj,obj)

官网文档:https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html

功能描述

获取当前的地理位置、速度。

使用方法

自 2022 年 7 月 14 日后发布的小程序，若使用该接口，需要在 app.json 中进行声明

2.map.moveToLocation():移动到当前的经纬度

文档位置:https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.moveToLocation.html

3.默认移动到当前位置

pages/index2/index.js

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad:<
最低0.47元/天 解锁文章
微信小程序API_位置信息API_设备应用API
LOVEcao_YU的博客
10-19 507
#微信小程序（15）API（4）#位置信息API #设备应用API
2022-01-19 微信小程序-萌宠大作战项目(一) 项目思路和效果,map组件的介绍和使用,视图容器cover-image,首页的制作
GAARA
01-19 479
文章目录 一.准备 1.技术栈 前端 微信小程序 wxss wxml js 以及自带的ui组件 还有外部npm包的ui组件 后端 mongodb express 2.用到的数据库 3.项目思路和最终效果 项目思路 最终效果 一.配置文件,组件介绍和图片上传 0.配置app.json文件和app.wxss 1.map组件学习 map#marker属性:标记点用于在地图上显示标记的位置 2.视图容器cover-image:覆盖在原生组件之上的图片视图 3.把需要用到的小图标上传到[https://www.img
微信小程序实战教程：如何使用map组件实现地图功能
最新发布
Jiaberrr的博客
10-02 4529
map组件是微信小程序官方提供的一个地图组件，它支持地图展示、缩放、拖动、定位、标注等功能。在使用map组件之前，我们需要先在app.json中配置高德地图或腾讯地图的key。
uniapp中map组件点击标记点时moveToLocation方法失效
lifeiyang313的博客
08-09 1541
解决方法：点击标记点之后给一个延迟再触发moveToLocation方法即可。如果还要在移动标记点时改变scale的大小，建议看这篇文章。问题：使用moveToLocation未生效。实现效果：点击标记点时移动标记点至地图中心。
微信小程序 moveToLocation 不生效
qq_25186543的博客
02-14 1622
微信小程序 moveToLocation 不生效
uniapp的map地图组件介绍
weixin_67490903的博客
07-27 1万+
由之前描述可知，markers属性类型为Array，表示标记点用于在地图上显示标记的位置。这个数组属性，它里面有它的对象配置属性，分别是。
我的萌宠微信小程序源码
09-13
小程序也可以看作是一种新的连接用户与服务的方式，它将服务直接嵌入到微信内部，用户在使用微信的过程中可以便捷地获取所需的服务。微信小程序的主要优点在于它的轻量化，不需要占用手机的内存空间，也无需安装，...
精选资源
萌宠领养平台微信小程序的设计与实现毕业设计答辩PPT
10-08
在当今互联网时代，微信小程序以其无需下载安装、使用简便的特性，迅速占领了移动应用市场的一席之地。其应用范围涵盖生活的方方面面，其中，将微信小程序应用于萌宠领养平台，不仅可以提高用户体验，还能够为流浪...
微信小程序宠物社区pet-life
06-29
微信小程序作为移动端的一种轻量级应用形式，以其无需下载、即用即走的特性受到了广大用户的喜爱。在众多小程序中，“pet-life”作为一个专注于宠物社交的平台，为爱宠人士提供了一个互动交流的空间。本文将深入探讨...
微信小程序map组件如何使用？
laowang357的博客
12-17 2894
其中，longitude和latitude是地理坐标，markers是标记点数组，show-location表示是否显示当前位置。其中，markers数组中可以包含多个标记点，每个标记点包含id、longitude、latitude和name等属性。地图组件提供了一些方法，可以实现相关的功能。可以根据实际需求，调整地图参数和方法，实现更多有趣的功能。微信小程序提供了内置的地图组件，可以轻松地在小程序中展示地图，以及实现相关的功能。1. 在小程序的json文件中引入地图组件。4. 调用地图组件方法。
小程序定位 事件 点击事件 地图放回当前所在点
weixin_44950209的博客
08-08 1448
小程序打开地图 滑动地图之后 展示位置不在当前定位出 ，点击事件 触发地图返回当前定位点。定位事件 重点 使用this.mapCtx.moveToLocation()重新定位按钮 及绑定事件。地图展示组件 注意。准备事件 找到地图组件。...
微信小程序地图标记点marker，点击标记点显示详细信息
热门推荐
qq_42097490的博客
05-25 2万+
项目中想要实现的效果在地图上显示所有数据标点，点击显示详情信息，首先看一下图片是否符合各位的需求，在这里也是学习加深一下 直接上代码： wxml: <map id="myMap" scale="9" bindcontroltap="controltap" latitude="{{centerY}}" longitude="{{centerX}}" markers="{{markers}}" bindlabeltap="markertap" bindregiοnchange="regionchang
微信小程序：map组件在mpvue中的实践
繁华落尽
12-27 2521
map组件在mpvue中的实践 MAP组件文档地址 &lt;map name="map-zsb" id="map-zsb" class="map-zsb" scale="18" 缩放比例,默认16取值范围5-18 :latitude="lat" :longitude="lng" 地图中心点对应的经纬度 :markers=&q
uni-app（微信小程序）中“腾讯地图”和swiper联动效果，点击移动到标记点并显示详情及导航
weixin_43717867的博客
04-05 5048
uni-app（微信小程序）中“腾讯地图”和swiper联动效果，点击移动到标记点并显示详情及导航
微信小程序 移动地图，使地图中心到达目的地，标记出中心点 并获得坐标
heikai107的博客
03-03 3037
关键点一：绑定手停止滑动事件 bind:touchend=“touchEnd” 关键点二：获得地图中心点坐标 this.mapCtx.getCenterLocation 关键点三：用that = this 解开闭包 js页面 // pages/map/index13.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) {
记微信小程序的moveToLocation的大坑
AcStudio的博客
11-15 5280
今天实验做地图和腾讯地图组件 实验中需要实现一个功能 点击按钮，把位置设置为现在的位置 ps：现在的位置已经获取到存在了data里面 兴冲冲跑去看文档 MapContext.moveToLocation(Object object) 将地图中心移置当前定位点 一番操作 代码如下 goto_gps:function(){ let mpCtx = wx.createMapContext("myMap"); mpCtx.moveToLocation(); }, 哦豁 疯狂百度，
微信小程序地图wx.createMapContext的moveToLocation
zhou_w_x的博客
05-28 1万+
<map id="myMap" style="width: 100%; height: 500rpx;" latitude="{{latitude}}" longitude="{{longitude}}" scale='18' markers="{{markers}}" show-location></map> data: { latitude: 45.76, ...
微信小程序开发之基本组件详解2
dgvesrhetd的博客
04-01 1509
navigator组件主要用来页面跳转或者是退出主要属性：例子：在主页面跳转到新页面；在主页面中跳转页面。代码：main页面.wxml：
微信小程序：轻松掌握地图定位技能
希望看完文章的你能够带着答案离开。
12-24 2万+
微信小程序：轻松掌握地图定位技能
微信小程序实现萌宠领养平台：科技助力动物保护
"萌宠领养平台微信小程序的设计与实现是一个毕业设计项目，旨在通过微信小程序为流浪动物提供领养服务。该项目关注社会上被忽视的流浪动物问题，利用微信小程序的广泛用户基础和便捷性，帮助解决个体保护者的经济...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

前端OnTheRun

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

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

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

打赏作者

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

抵扣说明：

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

余额充值