微信小程序之地图功能
转载请注明出处:http://blog.csdn.net/crazy1235/article/details/55004841
本篇blog主要介绍微信小程序中的地图模块相关功能。
基本使用
地图组件使用起来也很简单。
.wxml
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" circles="{{circles}}" bindregionchange="regionchange" show-location style="width: 100%; height: 350px;">
</map>
参数列表及说明如下:
除了显示基本地图,还可以在地图上添加markers–标注,polyline–折线,circles–圆形,controls–控件。
markers
data: {//markers: [{iconPath: "../../img/marker_red.png",id: 0,latitude: 40.002607,longitude: 116.487847,width: 35,height: 45}],... //省略代码}
在data中定义markers变量来表示覆盖物
然后map控件引入即可:
<map id="map" longitude="{{longitude}}" markers="{{markers}}" style="width: 100%; height: 350px;" ...//省略代码>
</map>
效果如下:
polyline
data: {//polyline: [{points: [{longitude: '116.481451',latitude: '40.006822'}, {longitude: '116.487847',latitude: '40.002607'}, {longitude: '116.496507',latitude: '40.006103'}],color: "#FF0000DD",width: 3,dottedLine: true}],... //省略代码}
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" polyline="{{polyline}}" style="width: 100%; height: 350px;">
circles
data: {//circles: [{latitude: '40.007153',longitude: '116.491081',color: '#FF0000DD',fillColor: '#7cb5ec88',radius: 400,strokeWidth: 2}],... //省略代码}
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" circles="{{circles}}" style="width: 100%; height: 350px;">
效果如下:
controls
controls: [{id: 1,iconPath: '../../img/marker_yellow.png',position: {left: 0,top: 300 - 50,width: 50,height: 50},clickable: true}]
<map id="map" controls="{{controls}}" bindcontroltap="controltap" style="width: 100%; height: 350px;">
control点击事件如下:
controltap: function (e) {console.log(e.controlId);},
其实可以通过在map上添加一个按钮,来实现诸如:定位、状态返回等操作。
(直接通过布局文件在map上添加view是显示不出来的)
绑定事件
BUG
关于经纬度,官方文档上都写的是Number类型。但是通过IDE调试的时候,写成字符串也是可以的。但是在IOS真机上运行时,markers却显示不出来,也不报错。
后来自己对照属性的类型,发现后台传来的经纬度是字符串类型的。而字符串类型的经纬度在IOS真机上经测试就是显示不出来。
所以将字符串转成Number类型即可。
百度地图API
百度地图团队的速度还是不错的!在小程序正式公测的第三天(2017.1.11)就发布了小程序版百度地图API
百度地图微信小程序JavaScript API
然而一期的功能并不多:
POI检索服务
POI检索热刺联想服务
逆地址解析服务
天气查询
关于这四个功能,大家自行去调用API就是了!
我要吐槽的是,为什么只有逆地址解析服务,没有地址编码服务呢?!
好吧,你不提供,我加上好吧!!
把参考 web服务API里关于地址编码的API ,在小程序里面封装一下即可!
其实上面看到的四个API也是从他们原有的web服务API中抽出来的 !
核心代码如下:
let startGeocoding = function (e) {wx.request({url: 'https://api.map.baidu.com/geocoder/v2/',data: geocodingparam,header: {"content-type": "application/json"},method: 'GET',success(data) {let res = data["data"];if (res["status"] === 0) {let result = res["result"];// outputRes 包含两个对象,// originalData为百度接口返回的原始数据// wxMarkerData为小程序规范的marker格式let outputRes = {};outputRes["originalData"] = res;outputRes["wxMarkerData"] = [];outputRes["wxMarkerData"][0] = {id: 0,latitude: result["location"]['lat'],longitude: result["location"]['lng'],address: geocodingparam["address"],iconPath: otherparam["iconPath"],iconTapPath: otherparam["iconTapPath"],desc: '',business: '',alpha: otherparam["alpha"],width: otherparam["width"],height: otherparam["height"]}otherparam.success(outputRes);} else {otherparam.fail({errMsg: res["message"],statusCode: res["status"]});}},fail(data) {otherparam.fail(data);}});};
使用方法:
// 地理编码startGeocoding: function () {Bmap.geocoding({fail: fail,success: success,address: '北京大学',iconPath: '../../img/marker_red.png',iconTapPath: '../../img/marker_red.png'})},
然后我还对 静态图 这个API进行了小程序化!!!
/*** 静态图* * @author ys** @param {Object} param 检索配置* http://lbsyun.baidu.com/index.php?title=static*/getStaticImage(param) {var that = this;param = param || {};let staticimageparam = {ak: that.ak2,width: param["width"] || 400,height: param["height"] || 300,center: param["center"] || '北京', // 地址或者经纬度scale: param["scale"] || 1, // 是否为高清图 返回图片大小会根据此标志调整。取值范围为1或2。 1表示返回的图片大小为size= width *height; 2表示返回图片为(width*2)*(height *2),且zoom加1 注:如果zoom为最大级别,则返回图片为(width*2)*(height*2),zoom不变。zoom: param["zoom"] || 11, //高清图范围[3, 18];0低清图范围[3,19]copyright: param["copyright"] || 1, // 0表示log+文字描述样式,1表示纯文字描述样式markers: param["markers"] || null, // 标注,可通过经纬度或地址/地名描述;多个标注之间用竖线分隔};return "http://api.map.baidu.com/staticimage/v2?" + "ak=" + staticimageparam["ak"] + "&width=" + staticimageparam["width"] + "&height=" + staticimageparam["height"] + "¢er=" + staticimageparam["center"] + "&zoom=" + staticimageparam["zoom"] + "&scale=" + staticimageparam["scale"] + "©right=" + staticimageparam["copyright"];}
关于静态图,在web端调用的时候需要单独申请key,所以这里要在传入一个key!
在BMapWX构造函数中,传入ak2作为静态图的key
constructor(param) {this.ak = param["ak"];this.ak2 = param["ak2"];}
var Bmap = new bmap.BMapWX({ak: 'xxxxxxxxxxx',ak2: 'xxxxxxxxxxx'
});
使用方法也很简单:
//获取静态图getStaticImage: function () {var url = Bmap.getStaticImage({scale: 2});console.log(url);that.setData({staticImageUrl: url})}
高德地图API
相比百度地图团队,高德地图团队更及时! 小程序公测第二天就发布了 小程序高德地图API
微信小程序SDK > 概述
目前提供的功能有:
获取POI数据
获取地址描述数据
获取实时天气数据
获取输入提示词
路径规划
绘制静态图
在官网上,直接提供了路径规划的功能代码,和布局代码(.wxml & .wxss)
可见,高德还是比较靠谱的!
腾讯地图API
微信小程序JavaScript SDK
地点搜索
关键词输入提示
逆地址解析
地址解析
距离计算
获取城市列表
获取城市区县
注意
使用需要注意以下几点:
map 组件是由客户端创建的原生组件,它的层级是最高的。
请勿在 scroll-view 中使用 map 组件。
css 动画对 map 组件无效。
百度地图小程序SDK扩展下载地址:
https://github.com/crazy1235/WXlittleApplication
微信小程序之地图功能相关推荐
- 微信小程序自带地图_【小程序】微信小程序之地图功能
基本使用 地图组件使用起来也很简单. .wxml 参数列表及说明如下: 除了显示基本地图,还可以在地图上添加markers–标注,polyline–折线,circles–圆形,controls–控件. ...
- 微信小程序开发经验总结
前言: 前段时间公司打算做一款基于线下服务的小程序,涉及到扫码支付,地图,充值,会员体系等功能.由于公司暂时没有新招小程序开发人员,而我之前又有过开发小程序的经验.所以,这个小程序开发自然而然也就交给 ...
- 微信小程序map地图
使用微信小程序实现地图功能 wxml <mapid="myMap"style="width: 100%; height: 300px;"latitude= ...
- 微信小程序开发导航:精品教程+网友观点+demo源码(5月9日更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序导航:免费视频+精品教程+DEMO集合(长期更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序开发经验总结(遇到的坑和问题汇总)
小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java实时BUG监控.真的是一个很好用的bug监控费服务,众多大佬公司都在使用. 前言: 前段时间公司打 ...
- 微信小程序 地图功能的实现 map
微信小程序 地图功能的实现 map wxml部分地图标签 wxss js 这次项目有个功能是地图以选项卡方式可以选择进行不同位置展示实现方法就是 将地图和tab选项卡结合 选项卡刚开始我套了之前的滑动 ...
- 微信小程序自带地图_微信小程序开发之之地图功能(map)
本文将带你了解微信小程序开发之之地图功能(map),希望本文对大家学微信有所帮助. 主要介绍微信小程序中的地图模块相关功能.基本使用地图组件使用起来也很简单..wxml 1212参数列表及说明如下:除 ...
- 【小程序地图】uniapp开发微信小程序,显示地图功能,且点击后打开高德或腾讯地图。
最开始遇到地图这块的时候,想的比较复杂.想到是不是需要引用高德或者百度地图api 之类的. 其实完全没必要,使用uniapp自带的方法 uni.openLocation 即可. 话不多说,完整代码.注 ...
- 微信小程序----map组件实现(获取定位城市天气或者指定城市天气数据)
效果图 实现原理 采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city ...
最新文章
- Cygwin获取root权限
- 一个毕设的建成——记录下我毕设途中的《SOP》
- js console 输出到文件_Node.js核心入门
- 只安装了JRE,没有手动配置环境变量,eclipse跑不起来,Exit code = -1
- ASP.NET Core Docker Nginx分权,多网站部署
- linux 没有 分区表,在Windows下分区,安装linux,分区软件肿么没有linux swap 这个选项?...
- 三坐标测量圆直径_多台三坐标测量机联动测量方法的研究
- Atitit 区块链之道 attilax著 艾龙著 1. 金融=制度+技术+信息	1 2. 第一章可信的协议	1 3. 第二章引导未来:区块链经济七大设计原则	1 4. 第五章 新商业
- 告诉你一个真实的全球化
- 基于科大讯飞实现语音识别功能
- VC维(Vapnik–Chervonenkis dimension)
- zigbee终端向多个协调器发起请求的思路(终端入网流程分析)
- 【量化投资】三大经典策略
- 物联网与AI芯片密不可分 企业加速跑马圈地
- 使用TensorFlow调用PTB数据集并且搭建基于LSTM的PTB语言模型
- ASPX页面AJAX调用ASPX后台
- 云服务器1M带宽够用吗?(并发数计算方法)
- 和Oracle差距越来越小,你该了解的MySQL 8.0 SQL优化新特性
- python正则表达式试题_正则表达式练习题
- Altium Designer新版本PCB电路板添加logo
热门文章
- 15个素材下载网站,从此不做「伸手党」!
- word导入excel html,如何将word导入excel
- 移动终端安全模块技术研究
- html页面显示dcm文件,基于HTML5标准的Dicom图像显示.doc
- 关于html的实训日志,满足你的甜蜜幻想, 《我与她的实习日志》登陆NS
- python socket实现浏览器访问本地文件资源即静态网页(TCP)
- freeradius mysql ad_freeradiusmysql简单配置一例
- office2020与2016版的不同_Office 2016 各版本之间不同(要使用Access 2016必须安装Office 2016专业版)...
- c++识别图片身份证号码
- 暗时间 刘未鹏