小程序地图的使用笔记
这两天在看小程序的地图,写写笔记记录一下
小程序官方文档提供的方法
https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html
腾讯地图提供的jssdk
http://lbs.qq.com/qqmap_wx_jssdk/qqmapwx.html
根据提示使用腾讯地图jssdk需要申请,在实例化的时候填入密匙,接下来就可以使用他提供的各种方法了
我先说说我做关键词搜索和点击搜索结果进行路线规划(规划目前可能只是按自驾的路线,不完善的地方麻烦大家赐教了)
搜索我先使用getLocation获取当前位置坐标
wx.getLocation({type: 'wgs84',success: function (res) {latitude = res.latitudelongitude = res.longitudevar speed = res.speedvar accuracy = res.accuracy},fail: function (res) {console.log(res)},complete: function (res) {console.log('Complete')}})
接着利用获取到的城市坐标获取城市名字
qqmapsdk.reverseGeocoder({location: {latitude: latitude,longitude: longitude},success: function(res){//console.log(res)cityName = res.result.address_component.cityconsole.log(cityName)},fail: function (res) {console.log(res);},complete: function (res) {console.log('获取当前城市完成');}})
然后调用getSuggestion方法进行当前城市的关键词搜索显示功能(将获取到的关键词循环显示在搜索下面,给便利出来的每个选项加个点击事件)
qqmapsdk.getSuggestion({keyword: inputData,region: cityName,success: function (res) {let searchData = res.dataconsole.log(searchData);that.setData({searchPlace: searchData})},fail: function (res) {console.log(res);},complete: function (res) {console.log(res);}});
点击所选地名进行地名的坐标存储
placeChoose: function (options){//console.log(options)let location = options.currentTarget.dataset.locationwx.setStorageSync('location', location)console.log(wx.getStorageSync('location'))wx.navigateBack({// 返回的页面数data: 1})}
进行线路规划(画路线)
//前往搜索地goSearchPlace: function(){let that = thislet searchLat = wx.getStorageSync('location').latlet searchLon = wx.getStorageSync('location').lngwx.request({url: 'https://apis.map.qq.com/ws/direction/v1/driving/?from=24.488476,118.096247&to=' + searchLat + ',' + searchLon + '&output=json&callback=cb&key=22VBZ-REEK5-WVSI7-QKCOP-QPM6E-W7BPO',success: function (res) {coors = res.data.result.routes[0].polylinefor (var i = 2; i < coors.length; i++) {coors[i] = coors[i - 2] + coors[i] / 1000000}console.log(coors)that.project()}})}
画线路函数我单独抽出来
project: function(){var b=[]for (var i=0;i<coors.length;i=i+2){b[i / 2] = {latitude: coors[i], longitude: coors[i + 1]}console.log(b[i / 2])}console.log(b.length)that2.setData({polyline: [{points: b,color: "#9999FF",width: 4,dottedLine: false}]})}
转载于:https://www.cnblogs.com/FarmanKKK/p/7803648.html
小程序地图的使用笔记相关推荐
- php小程序地图处理,微信小程序 地图map详解及简单实例
微信小程序 地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
- 微信小程序开发:学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]--页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
- 微信小程序开发:学习笔记[9]——本地数据缓存
微信小程序开发:学习笔记[9]--本地数据缓存 快速开始 说明 本地数据缓存是小程序存储在当前设备上硬盘上的数据,本地数据缓存有非常多的用途,我们可以利用本地数据缓存来存储用户在小程序上产生的操作,在 ...
- 微信小程序 微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
- php小程序地图处理,微信小程序地图 map
微信小程序地图 map 微信小程序map 地图 标记点 标记点用于在地图上显示标记的位置,不能自定义图标和样式 覆盖物 覆盖物用于在地图上显示自定义图标,可自定义图标和样式 地图组件的经纬度必填, 如 ...
- 小程序地图定位授权取消后再次授权
更博啦,背景:webview+小程序,新增收货地址是h5页面,调的小程序地图.获取到地址后再将值带入网页中.最近写的项目中遇到地图定位弹框拒绝授权后,无法再次调起地图组件,页面显示空白,用户使用体验差 ...
- 微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败)
微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热.微信小程序的特点便是"无需安装,用完即走",而我们所说的AR用 ...
- 微信小程序--地图上添加图片
如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...
- 微信小程序地图签到功能
签到功能转自:https://gitee.com/Suwanbin/positionCheckIn 也可参考:https://github.com/SincerelyUnique/wechat-min ...
最新文章
- deploy java eclipse_使用eclipse的mvn deploy部署本地包到maven私有库
- oracle查询用户连接记录,记录ORACLE用户登录信息
- $.ajax的type属性,$.ajax中contentType属性为“application/json”和“application/x-www-form-urlencoded”的区别...
- 898. 子数组按位或操作
- Boost:实现异步客户端
- 弹窗时候禁止页面滚动
- 快速使用Vue3最新的15个常用API
- python 中locals() 和 globals()
- POJ NOI MATH-7656 李白的酒
- JavaScript—模块化(26)
- 解决SVN安装语言包后无法选择中文的问题
- windows下完美的免费QT开发环境: QtCreator + VC2008Express
- Hadoop之纠删码
- 工程项目管理系统源码
- 探访北大最AI的食堂!刷脸打饭,机器认识200多道菜
- LED Designing
- 网页旅游景点页面建设
- vscode 使用code runner配置c++11
- java爬虫实战——实现简单的爬取网页数据
- PLC信号处理系列之开关量信号(DI)防抖
热门文章
- 关于矩形连线 (rectangle connect)
- 图形化编程 html,用GoJS实现图形化交互编程界面示例
- android sdk软件开发套件,ANDROIDSDK-SITARA
- 软件自动测试框架,软件自动化测试框架的研究和实现
- linux sed高级用法,sed 高级用法
- 禅道设置bug模板_一款热度很高的项目管理和bug工具,免费使用,可在公司推广哦...
- eclipselink mysql_Eclipse连接MySQL数据库(傻瓜篇)
- 语言编奇数和合偶数和_不同的语言怎样求解奇数和?
- php打印出来乱码_PHP输出中文乱码的解决方法(转载)
- 优达学城《DeepLearning》项目2:犬种分类器