微信小程序地图定位的实现方法实例
作者:水星记_ 发布时间:2023-08-25 10:13:10
标签:微信小程序,地图,定位
前言
地图定位这个功能大家都很熟悉吧,那微信小程序中要怎么实现地图定位呢,其实非常简单,没有大家想象中那么难,看完本篇文章,你也可以轻松实现这个小功能哦。
方法如下
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
wx.chooseLocation({
success: function (res) {
console.log(res.name);
//赋值给data中的mapName
that.setData({
mapName: res.name
})
},
//错误信息
fail: function () {
console.log(err);
}
})
}
js完整代码
Page({
data: {
latitude: 0, //首次加载维度
longitude: 0, //首次加载的经度
mapName: "", //选点的位置
},
moveToLocation() {
let that = this
wx.chooseLocation({
success: function (res) {
console.log(res.name);
//赋值给data中的mapName
that.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文件中定义授权信息。
来源:https://blog.csdn.net/Shids_/article/details/122133079
0
投稿
猜你喜欢
- 1. LEFT OUTER JOIN:左外关联 SELECT e.last_name, e.department_id, d.departm
- 1.创建数据库连接,并打开set cnn=Server.CreateObject("ADODB.Connection&q
- 代码如下:SELECT * FROM Orders WHERE OrderGUID IN('BC71D821-9E25-
- 这几天在QQ群里知道了几个比较好的优化方面的站,感觉看高手的文章简直就是一种享受。和很多现在正在阅读这篇文章的站长一样,我即将毕业,但是还没
- http://validator.w3.org/#validate_by_upload 在线校验网址点浏览,上次找到自己做的页面
- <%on error resume nextdim conn,sql,rsset conn=Server.CreateObject(&
- 基本原理使用Adodb.Stream读二进制文件然后进行解析,然后返回一数组第一个元素为类型(BMP JPG PNG GIF SWF)第二个
- documentFragment 是一個無父對象的document對象.他支持以下DOM2方法:appendChild, cloneNode
- 有关JS中字符串的相关文章,现在网上大概不计其数了。这里我不想再就这个问题做过多的论述,只是对几种方式的实现在各种浏览器中的执行效率进行对比
- Security vulnerability in MySQL/MariaDB 在知道用户名的情况下(如root),直接反复重试(平均大约2
- sql server中变量要先申明后赋值:局部变量用一个@标识,全局变量用两个@(常用的全局变量一般都是已经定义好的);申明局部变量语法:d
- <!--#include file="strcheck.asp"--> <% '笔者在写程序的
- 1. RequestDispatcher.forward()在服务器端起作用,当使用forward()时,Servlet engine传递H
- 主要代码如下: total = application("All
- 首先,啰嗦几句废话如下: (1)触发器(trigger)是个特殊的存储过程,它的执行并不需要我们去显式调用,而是由一些事件触发,这有点类似C
- 知识点: 1、拼接SQL 2、UNION ALL 3、EXEC 其代码如下: 代码如下:--测试示例 declare @sql
- 写在前面的话:Part 1记得刚毕业那时,常幻想着自己是个大艺术家,满怀憧憬的想找一份理想的工作。后来入了行,慢慢的发现自己好像不是这块料;
- 第1章 argparse简介1.1 解析argparse 模块是 Python 内置的一个用于命令项选项与参数解析的模块
- 前言在AI领域,来快速实现一个idea:前后端开发+部署+展现,如果走传统的前后端分离开发+服务器docker部署等方式,会很重且入门成本很
- 在SQL Server中进行开发会让你身处险地,并且寻找快速解决方案。我们编辑了前十名关于SQL Server开发的常见问题。对常见的针对表