微信小程序自带地图_【小程序】微信小程序之地图功能
基本使用
地图组件使用起来也很简单。
.wxml
参数列表及说明如下:
除了显示基本地图,还可以在地图上添加markers–标注,polyline–折线,circles–圆形,controls–控件。
markers
data: {
//
markers: [{
iconPath: "../../img/marker_red.png",
id: 0,
latitude: 40.002607,
longitude: 116.487847,callout:{
content:'气泡名称',
color: '#FF0000',
fontSize: 15,
borderRadius: 10,
display: 'ALWAYS',
}
width:35,
height:45
}],
... //省略代码
}
#########################################################################
在data中定义markers变量来表示覆盖物
然后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
}],
... //省略代码
}
1
circles
data: {
//
circles: [{
latitude: '40.007153',
longitude: '116.491081',
color: '#FF0000DD',
fillColor: '#7cb5ec88',
radius: 400,
strokeWidth: 2
}],
... //省略代码
}
1
效果如下:
controls
controls: [{
id: 1,
iconPath: '../../img/marker_yellow.png',
position: {
left: 0,
top: 300 - 50,
width: 50,
height: 50
},
clickable: true
}]
1
control点击事件如下:
controltap: function (e) {
console.log(e.controlId);
},
其实可以通过在map上添加一个按钮,来实现诸如:定位、状态返回等操作。
(直接通过布局文件在map上添加view是显示不出来的)
绑定事件
BUG
关于经纬度,官方文档上都写的是Number类型。但是通过IDE调试的时候,写成字符串也是可以的。但是在IOS真机上运行时,markers却显示不出来,也不报错。
后来自己对照属性的类型,发现后台传来的经纬度是字符串类型的。而字符串类型的经纬度在IOS真机上经测试就是显示不出来。
所以将字符串转成Number类型即可。
百度地图API
百度地图团队的速度还是不错的!在小程序正式公测的第三天(2017.1.11)就发布了小程序版百度地图API
然而一期的功能并不多:
POI检索服务
POI检索热刺联想服务
逆地址解析服务
天气查询
关于这四个功能,大家自行去调用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
目前提供的功能有:
获取POI数据
获取地址描述数据
获取实时天气数据
获取输入提示词
路径规划
绘制静态图
在官网上,直接提供了路径规划的功能代码,和布局代码(.wxml & .wxss)
可见,高德还是比较靠谱的!
腾讯地图API
地点搜索
关键词输入提示
逆地址解析
地址解析
距离计算
获取城市列表
获取城市区县
注意
使用需要注意以下几点:
map 组件是由客户端创建的原生组件,它的层级是最高的。
请勿在 scroll-view 中使用 map 组件。
css 动画对 map 组件无效。
百度地图小程序SDK扩展下载地址:
微信小程序自带地图_【小程序】微信小程序之地图功能相关推荐
- 微信小程序自带地图_微信小程序开发之之地图功能(map)
本文将带你了解微信小程序开发之之地图功能(map),希望本文对大家学微信有所帮助. 主要介绍微信小程序中的地图模块相关功能.基本使用地图组件使用起来也很简单..wxml 1212参数列表及说明如下:除 ...
- 微信小程序自带地图_小程序丨教你:如何打开小程序如何打开微信自带的地图(附源码)...
教你小程序系列教程:教你小程序系列教程: 1.教你:微信小程序如何实现scroll-view隐藏滚动条 2.教你:如何使用scroll-view组件实现视图垂直滚动(附源码) 3.教你:小程序如何使用 ...
- 微信小程序自带地图_微信小程序之map地图
微信小程序地图操作比较简单,api也很少,使用map组件来展示.说到地图,那就先来看基础定位: 定位用到wx.getLocation(OBJECT)函数,代码如下: wx.getLocation({ ...
- 微信小程序自带地图_微信小程序地图上选择位置
实现效果 很多小程序都有如下需求: 小程序打开后,以文字形式显示用户所在位置,如果用户觉得不准,可以打开地图,在地图上自己选择位置,选择完成后,显示的用户的位置会发生变化 点击地址选择地点 选择地点之 ...
- 微信小程序自带地图_微信小程序获取当前位置并调用微信内置地图打开
图示: index.wxml 定位 index.js //index.js //获取应用实例 const app = getApp() Page({ data: { }, map:function() ...
- 一线程序员带你实践学习企业实战C/C++程序员课程
作者吴从周 资源简介: 传统的C/C++的教材和课程都属于学院派,只是单纯的讲一些知识点,却没有讲到实际开发中我们常用的知识点有哪些,本课程将打破传统的弊端,一线程序员将带你实践学习企业实战项目中LI ...
- 微信小程序在url简化_简化对Web应用程序的数据分析
微信小程序在url简化 数据(Analytics / ML)到应用程序-零痛苦 (Data (Analytics/ML) to App - with zero pain) We all want to ...
- 小程序webview不全屏_有赞微信商城和有赞微信小程序什么不一样
有赞微信商城和有赞微信小程序什么不一样?许多商家的小程序就是微信商城,有了微信商城,小程序也就没必要再用了,这种掌握当然是有误的,小程序和微信商城的正中区别还是很明显的.Apple和微信商城的中间区别 ...
- 微信小程序超级占内存_实测:微信小程序究竟会占用多少内存?结果竟然
上图就是小编微信中已经安装的小程序列表.微信占用的内存空间数据.接下来小编安装两个小程序. 上图就是安装小程序之后的结果,可以看出,安装程序对内存空间影响几乎没有.(可能是极小,小到可以忽略不计.) ...
最新文章
- mac r 导出csv文件_每天学习一点R:8.数据的导入和输出
- PHP极其强大的图片处理库Grafika详细教程(3):图像属性处理
- ARM Cortex-M学习简介
- MSP430程序跑飞原因
- jedis StreamEntryID参数解释
- 08 事务到底是隔离的还是不隔离的?(转)
- 14.性能之巅 洞悉系统、企业与云计算 --- 附录
- keras ImageDataGenerator数据增强
- CentOS 6.2安装配置LAMP服务器(Apache+PHP5+MySQL)
- 《圈圈教你玩USB》 第三章 USB鼠标的实现——看书笔记( 3 )
- 计算机病毒有几个阶段,计算机病毒发展9阶段
- 计算机硬盘型号怎么看,硬盘编号怎么看
- 串标是什么意思?用同一台电脑制作或上传投标书,会被认定为串标吗?
- C++ 创建 TcpClient 客户端,使用QAbstractSocket 、 QtNetwork
- 服务器修改传奇道士神兽升级,1.76复古传奇道士玩家快速升级神兽的技巧
- ffmpeg 为取经而来_取经路上的妖魔鬼怪,傻傻分不清楚
- Gangs(附C语言实现)
- 一文吃透MySQL面试八股文
- 房屋抵押贷款需要什么手续和条件?
- Python语音识别,让人工智能给你读读书,你是想听——萝莉音?御姐音?大叔音?正太音?这些任你选择哦~~~