微信小程序开发——map地图组件,定位,并手动修改位置偏差。
来源:互联网 发布:linux服务器修改密码 编辑:程序博客网 时间:2024/06/05 16:43
环境搭建
- 注册,获取APPID(没有这个不能真鸡调试)
- 下载微信web开发者工具(挺多bug,将就用)
- 打开微信web开发者工具,扫码登录,新建小程序,输入APPID,勾选创建quick start项目。
工程结构
可以看到工程根目录中有个app.js,这里可以定义全局变量,通过getApp()获取。
项目中有了一些示例,已经有了获取用户信息的方法等。
开发地图定位,选择位置功能
我们直接修改index页面来做这个功能。
准备
- 新建imgs目录,加入2个图标(ic_location和ic_position),用于标记当前位置,和地图中央位置。
添加定位功能
修改app.js,加入定位功能,获取当前位置。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
地图控件布局
修改pages/index/index.wxml文件,添加map标签,如下
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 需要给地图指定一个id,后面可以通过id获取地图的上下文。
- 监听bindregionchange事件,地图变化的时候可以监听到。
- 地图的大小不要写死,动态设置,我这里打算设置为宽高都是屏幕宽度。
- controls是固定在map组件上面的。一开始我想用image替代,但是设置z-index也不能在地图上面,毕竟不是H5开发。
逻辑代码编写
编辑index.js
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
展示
这样,就OK啦,用户可以看到自己的定位,如果觉得有偏差,可以移动地图,把中央点放到自己认为的准确位置上。
- 顶
- 3
- 踩
阅读全文
0 0
- 微信小程序开发——map地图组件,定位,并手动修改位置偏差。
- 微信小程序开发——map地图组件,定位,并手动修改位置偏差。
- iOS 地图定位偏差
- iOS 地图定位偏差
- 【IOS开发】高德地图定位坐标偏差
- 微信小程序开发之真机测试 地图定位 map API 无法获取当前位置的问题
- 微信小程序开发之真机测试 地图定位 map API 无法获取当前位置的问题
- 微信小程序开发之真机测试 地图定位 map API 无法获取当前位置的问题
- Android使用百度地图定位SDK在wifi下位置偏差
- 微信小程序开发MAP(地图)
- 利用MAP文件定位程序崩溃位置
- 百度定位:定位自己位置,并显示在地图上
- Android百度地图开发(二)定位之手动定位
- 百度地图Android sdk开发笔记五修改定位位置的图标
- 微信小程序地图定位
- Google Map开发系列(六)——谷歌地图坐标定位
- android 百度地图定位开发之时时定位-位置获取
- Android Map Api 使用和开发(2) 定位我的位置、地图弹出泡泡、通过经纬度获取地址
- 【Solr】深入浅出Solr(一)——搜索系统介绍
- java集合(Collection接口下的 List、Set 深入理解)
- 请通过代码实现以下功能:输入一个5X5的二维数组,将数组进行排序,其中一维数组按照平均值降序,一维数组内部升序排列。
- Webrt中H264编码相关问题
- C#之入门总结_ 分支语句_02
- 微信小程序开发——map地图组件,定位,并手动修改位置偏差。
- 1、dubbo介绍
- 创建线程以及管理线程池基本理解
- go语言学习
- linux 下安装mongocxx
- javaScript基本语法
- 树中两个节点的最低公共祖先(剑指offer)
- Linux中PS1-终端提示符设置
- 微信红包照片来了,用变色龙隐形二维码赚点零花钱