微信小程序实现地图定位

前言

地图定位这个功能大家都很熟悉吧，那大家知道微信小程序中要怎么实现地图定位呢，其实非常简单，看完本篇文章，你也可以轻松实现这个小功能。

1.首先呢你要有一个方法去触发这个点击事件，下面已经写好啦，非常简单的两行代码。

<input placeholder="请选择地址..." value="{{mapName}}"></input>
<button bindtap="moveToLocation">地图选点</button>

2.接下来就到 js 了，我们要在 data 中声明首次加载的经度和维度，然后在声明一个选点的位置。

data: {latitude: 0, //首次加载维度longitude: 0, //首次加载的经度mapName: "", //选点的位置},

3.下面就是在 moveToLocation 事件中执行地图操作啦，主要是通过 wx.chooseLocation 方法，然后将拿到的值赋值给上面 data 中定义的 mapName 即可。

moveToLocation() {let that = this;//防止this指向问题wx.chooseLocation({success: function (res) {console.log(res.name);//赋值给data中的mapNamethat.setData({mapName: res.name})},//错误信息fail: function () {console.log(err);}})
}

js完整代码

Page({data: {latitude: 0, //首次加载维度longitude: 0, //首次加载的经度mapName: "", //选点的位置},moveToLocation() {let that = this;//防止this指向问题wx.chooseLocation({success: function (res) {console.log(res.name);//赋值给data中的mapNamethat.setData({mapName: res.name})},//错误信息fail: function () {console.log(err);}})}
})

4.最后的最后我们需要在 app.json 文件中添加这么一段：

"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}},

5.展示

总结：

1. wxml 文件中定义一个方法触发点击事件；
2. js 文件在 data 中声明首次加载的经度和维度，然后声明一个选点的位置用于在页面展示选中的地址；
3. 触发 moveToLocation 事件，执行地图操作，通过 wx.chooseLocation 方法将拿到地址的值赋值给 data 中定义的 mapName；
4. 在 app.json 文件中定义授权信息。

微信小程序实现地图定位相关推荐

微信小程序百度地图API移动选点
微信小程序百度地图API移动选点本文首发微信小程序百度地图API移动选点因为业务需要使用百度地图API,参考一位大佬编写腾讯API的思路和方法,改造成百度地图API移动选点. 思路: wxml前端 ...
腾讯位置服务--微信小程序JSSDK地图开发
腾讯位置服务–微信小程序JSSDK地图开发 1.腾讯位置服务文档传送门:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview [ ...
微信小程序调用地图和跟据经纬度打开手机地图导航
微信小程序调用地图和跟据经纬度打开手机地图导航第一步:输入地址位置 wxml<button bindtap="onChooseLocation">打开地图</b ...
微信小程序实现简单定位功能
微信小程序实现简单定位功能,简单易读,获取经纬度信息在pages下创建一个单页如local local.js如下 var app = getApp() Page({ data:{latitude:' ...
高德地图api调用demo_微信小程序----高德地图API实现的DEMO
[实例简介] 微信小程序----高德地图API实现的周边,天气,路线规划,地址详情等的DEMO.简单的效果,问一下官方能不能不要乱涨积分,你们涨积分,作者被骂!我真的很失望,再这样,我就不上传资源了! ...
uniapp 微信小程序，开启定位权限，permission ： scope.userLocation
uniapp 微信小程序,开启定位权限,scope.userLocation 问题在网上看了好多帖子,一言两语,想骂人, 解决注意uniapp项目在manifest.json 文件下配置,不要迷路 ...
uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标实际发布后手机上的效果 (此处忽略位置 ...
微信小程序-3D地图场景+定位导航-法院3D室内导航系统-为群众提供诉讼全流程导航服务
随着互联网信息的快速发展,我国的信息化水平也得到了全面的提升.尤其近几年在疫情的影响下,微信的小程序应用已经渗入生活的方方面面,无论是日常出行的健康码还是线上商城的购物,小程序以其轻便.响应速度快.不 ...
onenetsim定位功能吗_微信小程序新增后台定位功能，你会卸载地图APP用微信导航吗...
[PConline]8月8日,根据微信官方发布的消息显示,小程序新增后台定位功能,并对自动化测试功能进行了升级.据介绍,为了满足线路导航.路线记录等服务场景下,小程序需要长时间持续定位来提供服务.当用 ...

微信小程序实现地图定位

前言

总结：

微信小程序实现地图定位相关推荐

最新文章

热门文章