专注于Android移动应用开发、,K歌达人和益盟操盘手开发工程师，技术交流QQ：...
微信小程序资源集合
1：官方工具：
2：简易教程：
3：设计指南：
4：设计资源下载：资源下载
5：微信小程序公测接入指南：
6：微信小程序支付文档：
7：新手入门宝典：
8：免费视频：
3月3日更新
3月3日更新demo：
2月25日更新
2月25日更新demo
2月19日更新
2月19日更新demo
2月14日更新
2月14日更新demo
2月9日更新
2月9日更新demo
2月3日更新
2月3日更新demo
1月23日更新
1月23日更新demo
1月19日更新
1月19日更新demo
1月14日更新
1月14日更新demo
1月7日更新
1月7日更新demo
没有更多推荐了，随笔 - 14&
文章 - 0&评论 - 5&trackbacks - 0
小程序map组件的官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html
1.controls控件：在地图的固定位置（相对位置）上显示，并且不随地图移动。clickable为true时，可触发bindcontroltap的方法。
2.circles控件：通过经纬度确定中心点，radius属性单位为米。
3.通过wx.createMapContext('地图id')可以获取map对象。其中map对象包括
getCenterLocation：&获取当前地图中心位置的经纬度，并返回 gcj02 坐标（wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标），
moveToLocation：将地图中心移动到当前定位点，map组件中需要加入show-location属性。
阅读(...) 评论()请登录查看
微信小程序map地图。属性名类型默认值说明最低版本longitudeNumber&中心经度&latitudeNumber&中心纬度&scaleNumber16缩放级别，取值范围为5-18&markersArray&标记点&coversArray&即将移除，请使用 markers&polylineArray&路线&circlesArray&圆&controlsArray&控件&include-pointsArray&缩放视野以包含所有给定的坐标点&show-locationBoolean&显示带有方向的当前定位点&bindmarkertapEventHandle&点击标记点时触发&bindcallouttapEventHandle&点击标记点对应的气泡时触发bindcontroltapEventHandle&点击控件时触发&bindregionchangeEventHandle&视野发生变化时触发&bindtapEventHandle&点击地图时触发&注意: covers 属性即将移除，请使用 markers 替代
markers标记点用于在地图上显示标记的位置
属性说明类型必填备注最低版本id标记点idNumber否marker点击事件回调会返回此id&latitude纬度Number是浮点数，范围 -90 ~ 90&longitude经度Number是浮点数，范围 -180 ~ 180&title标注点名String否&&iconPath显示的图标String是项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径&rotate旋转角度Number否顺时针旋转的角度，范围 0 ~ 360，默认为 0&alpha标注的透明度Number否默认1，无透明&width标注图标宽度Number否默认为图片实际宽度&height标注图标高度Number否默认为图片实际高度&callout自定义标记点上方的气泡窗口Object否{content, color, fontSize, borderRadius, bgColor, padding, boxShadow, display}label为标记点旁边增加标签Object否{color, fontSize, content, x, y}，可识别换行符，x,y原点是marker对应的经纬度anchor经纬度在标注图标的锚点，默认底边中点Object否{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点marker 上的气泡 callout属性说明类型content文本Stringcolor文本颜色StringfontSize文字大小NumberborderRadiuscallout边框圆角NumberbgColor背景色Stringpadding文本边缘留白Numberdisplay'BYCLICK':点击显示; 'ALWAYS':常显Stringpolyline指定一系列坐标点，从数组第一项连线至最后一项属性说明类型必填备注最低版本points经纬度数组Array是[{latitude: 0, longitude: 0}]&color线的颜色String否8位十六进制表示，后两位表示alpha值，如：#000000AA&width线的宽度Number否&&dottedLine是否虚线Boolean否默认false&arrowLine带箭头的线Boolean否默认false，开发者工具暂不支持该属性borderColor线的边框颜色String否&borderWidth线的厚度Number否&circles在地图上显示圆属性说明类型必填备注latitude纬度Number是浮点数，范围 -90 ~ 90longitude经度Number是浮点数，范围 -180 ~ 180color描边的颜色String否8位十六进制表示，后两位表示alpha值，如：#000000AAfillColor填充颜色String否8位十六进制表示，后两位表示alpha值，如：#000000AAradius半径Number是&strokeWidth描边的宽度Number否&controls在地图上显示控件，控件不随着地图移动属性说明类型必填备注id控件idNumber否在控件点击事件回调会返回此idposition控件在地图的位置Object是控件相对地图位置iconPath显示的图标String是项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径clickable是否可点击Boolean否默认不可点击position属性说明类型必填备注left距离地图的左边界多远Number否默认为0top距离地图的上边界多远Number否默认为0width控件宽度Number否默认为图片宽度height控件高度Number否默认为图片高度地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。示例：
=&113.324520& // map.js
markers: [{
iconPath: &/resources/others.png&,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
longitude: 113.324520,
latitude: 23.21229
color:&#FF0000DD&,
dottedLine: true
controls: [{
iconPath: '/resources/location.png',
position: {
top: 300 - 50,
width: 50,
height: 50
clickable: true
regionchange(e) {
console.log(e.type)
markertap(e) {
console.log(e.markerId)
controltap(e) {
console.log(e.controlId)
Bug & Tiptip:map组件是由客户端创建的原生组件，它的层级是最高的。tip: 请勿在scroll-view中使用map组件。tip:css动画对map组件无效。tip:map组件使用的经纬度是火星坐标系，调用wx.getLocation接口需要指定type为gcj02
意见反馈：
联系方式：
广告等垃圾信息
不友善内容
违反法律法规的内容
不宜公开讨论的政治内容微信小程序map地图。属性名类型默认值说明最低版本longitudeNumber&中心经度&latitudeNumber&中心纬度&scaleNumber16缩放级别，取值范围为5-18&markersArray&标记点&coversArray&即将移除，请使用 markers&polylineArray&路线&circlesArray&圆&controlsArray&控件&include-pointsArray&缩放视野以包含所有给定的坐标点&show-locationBoolean&显示带有方向的当前定位点&bindmarkertapEventHandle&点击标记点时触发&bindcallouttapEventHandle&点击标记点对应的气泡时触发bindcontroltapEventHandle&点击控件时触发&bindregionchangeEventHandle&视野发生变化时触发&bindtapEventHandle&点击地图时触发&注意: covers 属性即将移除，请使用 markers 替代
markers标记点用于在地图上显示标记的位置
属性说明类型必填备注最低版本id标记点idNumber否marker点击事件回调会返回此id&latitude纬度Number是浮点数，范围 -90 ~ 90&longitude经度Number是浮点数，范围 -180 ~ 180&title标注点名String否&&iconPath显示的图标String是项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径&rotate旋转角度Number否顺时针旋转的角度，范围 0 ~ 360，默认为 0&alpha标注的透明度Number否默认1，无透明&width标注图标宽度Number否默认为图片实际宽度&height标注图标高度Number否默认为图片实际高度&callout自定义标记点上方的气泡窗口Object否{content, color, fontSize, borderRadius, bgColor, padding, boxShadow, display}label为标记点旁边增加标签Object否{color, fontSize, content, x, y}，可识别换行符，x,y原点是marker对应的经纬度anchor经纬度在标注图标的锚点，默认底边中点Object否{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点marker 上的气泡 callout属性说明类型content文本Stringcolor文本颜色StringfontSize文字大小NumberborderRadiuscallout边框圆角NumberbgColor背景色Stringpadding文本边缘留白Numberdisplay'BYCLICK':点击显示; 'ALWAYS':常显Stringpolyline指定一系列坐标点，从数组第一项连线至最后一项属性说明类型必填备注最低版本points经纬度数组Array是[{latitude: 0, longitude: 0}]&color线的颜色String否8位十六进制表示，后两位表示alpha值，如：#000000AA&width线的宽度Number否&&dottedLine是否虚线Boolean否默认false&arrowLine带箭头的线Boolean否默认false，开发者工具暂不支持该属性borderColor线的边框颜色String否&borderWidth线的厚度Number否&circles在地图上显示圆属性说明类型必填备注latitude纬度Number是浮点数，范围 -90 ~ 90longitude经度Number是浮点数，范围 -180 ~ 180color描边的颜色String否8位十六进制表示，后两位表示alpha值，如：#000000AAfillColor填充颜色String否8位十六进制表示，后两位表示alpha值，如：#000000AAradius半径Number是&strokeWidth描边的宽度Number否&controls在地图上显示控件，控件不随着地图移动属性说明类型必填备注id控件idNumber否在控件点击事件回调会返回此idposition控件在地图的位置Object是控件相对地图位置iconPath显示的图标String是项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径clickable是否可点击Boolean否默认不可点击position属性说明类型必填备注left距离地图的左边界多远Number否默认为0top距离地图的上边界多远Number否默认为0width控件宽度Number否默认为图片宽度height控件高度Number否默认为图片高度地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。示例：
=&113.324520& // map.js
markers: [{
iconPath: &/resources/others.png&,
latitude: 23.099994,
longitude: 113.324520,
width: 50,
height: 50
polyline: [{
points: [{
longitude: 113.3245211,
latitude: 23.10229
longitude: 113.324520,
latitude: 23.21229
color:&#FF0000DD&,
dottedLine: true
controls: [{
iconPath: '/resources/location.png',
position: {
top: 300 - 50,
width: 50,
height: 50
clickable: true
regionchange(e) {
console.log(e.type)
markertap(e) {
console.log(e.markerId)
controltap(e) {
console.log(e.controlId)
Bug & Tiptip:map组件是由客户端创建的原生组件，它的层级是最高的。tip: 请勿在scroll-view中使用map组件。tip:css动画对map组件无效。tip:map组件使用的经纬度是火星坐标系，调用wx.getLocation接口需要指定type为gcj02
请登录查看微信小程序之地图功能
我的图书馆
微信小程序之地图功能
转载请注明出处：
本篇blog主要介绍微信小程序中的相关功能。
地图组件使用起来也很简单。
&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: 350"&
参数列表及说明如下：
除了显示基本地图，还可以在地图上添加markers–标注，polyline–折线，circles–圆形，controls–控件。
markers: [{
iconPath: "../../img/marker_red.png",
latitude: 40.002607,
longitude: 116.487847,
width: 35,
height: 45
... //省略代码
}123456789101112
在data中定义markers变量来表示覆盖物
然后map控件引入即可：
&map id="map" longitude="{{longitude}}"
markers="{{markers}}" style="width: 100%; height: 350" ...//省略代码&
效果如下：
polyline: [{
points: [{
longitude: '116.481451',
latitude: '40.006822'
longitude: '116.487847',
latitude: '40.002607'
longitude: '116.496507',
latitude: '40.006103'
color: "#FF0000DD",
dottedLine: true
... //省略代码
123456789101112131415161718192021
&map id="map" longitude="{{longitude}}" latitude="{{latitude}}" polyline="{{polyline}}" style="width: 100%; height: 350"&1
circles: [{
latitude: '40.007153',
longitude: '116.491081',
color: '#FF0000DD',
fillColor: '#7cb5ec88',
radius: 400,
strokeWidth: 2
... //省略代码
1234567891011121314
&map id="map" longitude="{{longitude}}" latitude="{{latitude}}" circles="{{circles}}" style="width: 100%; height: 350"&1
效果如下：
controls: [{
iconPath: '../../img/marker_yellow.png',
position: {
top: 300 - 50,
width: 50,
height: 50
clickable: true
}]1234567891011
&map id="map" controls="{{controls}}" bindcontroltap="controltap" style="width: 100%; height: 350"&1
control点击事件如下：
controltap: function (e) {
console.log(e.controlId);
其实可以通过在map上添加一个按钮，来实现诸如：定位、状态返回等操作。
（直接通过布局文件在map上添加view是显示不出来的）
关于经纬度，官方文档上都写的是Number类型。但是通过IDE调试的时候，写成字符串也是可以的。但是在IOS真机上运行时，markers却显示不出来，也不报错。
后来自己对照属性的类型，发现后台传来的经纬度是字符串类型的。而字符串类型的经纬度在IOS真机上经测试就是显示不出来。
所以将字符串转成Number类型即可。
百度地图API
百度地图团队的速度还是不错的！在小程序正式公测的第三天（）就发布了小程序版百度地图API
然而一期的功能并不多：
POI检索服务
POI检索热刺联想服务
逆地址解析服务
关于这四个功能，大家自行去调用API就是了！
我要吐槽的是，为什么只有逆地址解析服务，没有地址编码服务呢？！
好吧，你不提供，我加上好吧！！
把参考，在小程序里面封装一下即可！
其实上面看到的四个API也是从他们原有的web服务API中抽出来的 ！
核心代码如下：
let startGeocoding = function (e) {
wx.request({
url: 'https://api.map.baidu.com/geocoder/v2/',
data: geocodingparam,
"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"] =
outputRes["wxMarkerData"] = [];
outputRes["wxMarkerData"][0] = {
latitude: result["location"]['lat'],
longitude: result["location"]['lng'],
address: geocodingparam["address"],
iconPath: otherparam["iconPath"],
iconTapPath: otherparam["iconTapPath"],
business: '',
alpha: otherparam["alpha"],
width: otherparam["width"],
height: otherparam["height"]
otherparam.success(outputRes);
otherparam.fail({
errMsg: res["message"],
statusCode: res["status"]
fail(data) {
otherparam.fail(data);
};1234567891011121314151617181920212223242526272829303132333435363738394041424344
使用方法：
// 地理编码
startGeocoding: function () {
Bmap.geocoding({
fail: fail,
success: success,
address: '北京大学',
iconPath: '../../img/marker_red.png',
iconTapPath: '../../img/marker_red.png'
},1234567891011
然后我还对 静态图
这个API进行了小程序化！！！
* @author ys
* @param {Object} param 检索配置
* http://lbsyun.baidu.com/index.php?title=static
getStaticImage(param) {
var that =
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 * 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"];
}1234567891011121314151617181920212223
关于静态图，在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({
console.log(url);
that.setData({
staticImageUrl: url
}12345678910
高德地图API
相比百度地图团队，高德地图团队更及时！ 小程序公测第二天就发布了 小程序高德地图API
目前提供的功能有：
获取POI数据
获取地址描述数据
获取实时天气数据
获取输入提示词
绘制静态图
在官网上，直接提供了路径规划的功能代码，和布局代码(.wxml & .wxss)
可见，高德还是比较靠谱的！
腾讯地图API
关键词输入提示
逆地址解析
获取城市列表
获取城市区县
使用需要注意以下几点：
map 组件是由客户端创建的原生组件，它的层级是最高的。
请勿在 scroll-view 中使用 map 组件。
css 动画对 map 组件无效。
百度地图小程序SDK扩展下载地址：
[转]&[转]&[转]&
喜欢该文的人也喜欢
