微信小程序~获取位置信息
微信小程序提供的getlocation来获取用户的定位，能够得到用户的经纬度信息
（注：getloaction需要用户授权scope.userLocation）结合map组件能够得到用户的详细定位
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location style="width: 100%; height: 400rpx;"></map> onReady:function(){ wx.getLocation({ type: 'wgs84',//默认wgs84是全球定位系统获取的坐标，gcj02是国家测绘局给出的坐标 success: (res) => { console.log('经度' + res.longitude + '，纬度' + res.latitude); this.setData({ latitude: res.latitude, longitude: res.longitude }) } }) }
| 参数名 | 参数类型 | 描述 |
|---|---|---|
| longitude | Number | 中心经度 |
| latitude | Number | 中心纬度 |
| scale | Number | 缩放级别，取值范围 5-18（默认16 number） |
| markers | Array | 标记点 |
| polyline | Array | 路线 |
| circle | Array | 圆 |
| controls | Array | 控件 |
| include-points | Array | 缩放视野以及所有给定的坐标点 |
| circle | Boolean | 圆 |
| show-location | EventHandle | 显示带有方向的当前定位点 |
| bindmarkertap | EventHandle | 点击标记点时触发 |
| bindcontroltap | EventHandle | 点击控件时触发 |
| bindregionchange | EventHandle | 视野发生变化时触发 |
| bindtap | EventHandle | 点击地图时触发 |
除了显示基本地图，还可以在地图上添加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 }], ... //省略代码 }
| 参数名 | 参数类型 | 必传 | 描述 |
|---|---|---|---|
| id | Number | N | 标记点id（marker事件回调会返回此id） |
| longitude | Number | Y | 中心经度（浮点数，范围：-180~180） |
| latitude | Number | Y | 中心纬度（浮点数，范围：-90~90） |
| title | String | N | 标注点名 |
| iconPath | String | Y | 显示的图标（项目目录下的图片路径，支持相对路径写法，以‘/’开头，则表示相对小程序的根目录，也支持临时路径） |
| rotate | Number | N | 旋转角度（顺时针旋转的角度，范围：0~360，默认0） |
| alpha | Number | N | 标注的透明度（默认1，无透明） |
| width | Number | N | 标注图标宽度（默认图标实际宽度） |
| height | Number | N | 标注图标高度（默认图标实际高度） |
| callout | Object | N | 自定义标注点上方的气泡窗口 ({content，color，fontSize，borderRadius，bgColor，padding，boxShadow，display}) |
| label | Object | N | 为标记点旁边增加标签（{color，font Size，content，x，y}，可识别换行符，x，y原点是marker对应的经纬度） |
polyline
指定一系列坐标点，从数组第一项连线至最后一项
| 参数名 | 参数类型 | 必传 | 描述 |
|---|---|---|---|
| points | Array | Y | 经纬度数组（[{latitude：0，longitude:0}]） |
| color | String | N | 线的颜色（8位16进制表示，后两位表示alpha值，如：#000000AA） |
| width | Number | N | 线的宽度 |
| dotted'Line | Boolean | N | 是否是虚线（默认false） |
// .wxml <map id="myMap" style='width:100%;height:50%' longitude="{{longitude}}" latitude="{{latitude}}" polyline='{{polyline}}'/> // .js Page({ data: { polyline:[{ points:[{ latitude:'40.006822', longitude:'116.481451' }, { longitude: '116.487847', latitude: '40.002607' }, { longitude: '116.496507', latitude: '40.006103' }, { latitude:'40.002607', longitude: '116.587847', }], width:2, color:'#000000AA', dottedLine:false }] } })
circles
在地图上显示圆
| 参数名 | 参数类型 | 必传 | 描述 |
|---|---|---|---|
| longitude | Number | Y | 中心经度（浮点数，范围：-180~180） |
| latitude | Number | Y | 中心纬度（浮点数，范围：-90~90） |
| color | String | N | 描边颜色（8位16进制表示，后两位表示alpha值，如：#000000AA） |
| fill'Color | String | N | 填充颜色（8位16进制表示，后两位表示alpha值，如：#000000AA） |
| strokeWidth | Number | N | 描边宽度 |
| radius | Number | Y | 半径 |
// .wxml <map id="myMap" style='width:100%;height:50%' longitude="{{longitude}}" latitude="{{latitude}}" circles='{{circles}}'/> // .js Page({ data: { circles:[{ latitude:40.002607, longitude: 116.587847, color: '#ee7788aa', radius: 50, fillColor:'#7cb5ec88', strokeWidth:1 }] } })
controls
在地图上显示控件，控件不随地图移动
| 参数名 | 参数类型 | 必传 | 描述 |
|---|---|---|---|
| id | Number | N | 控件id（在控件点击事件回调返回此id） |
| position | Object | Y | 控件在地图的位置（控件相对地图位置） |
| icon'Path | String | Y | 显示的图标（项目路径下的路径，支持相对路径写法，以‘/’开头表示相对小程序的根目录） |
| clickable | Boolean | N | 是否可点击（默认不可点击） |
position
| 参数名 | 参数类型 | 必传 | 描述 |
|---|---|---|---|
| left | Number | N | 距离地图左边界的距离（默认为0） |
| top | Number | N | 距离地图上边界的距离（默认为0） |
| width | Number | N | 控件宽度（默认图片宽度） |
| height | Number | N | 控件高度（默认图片高度） |
// .wxml <map id="myMap" style='width:100%;height:400px' longitude="{{longitude}}" latitude="{{latitude}}" controls='{{controls}}' bindcontroltap='controltap'/> // .js Page({ data: { controls: [{ id: 1, iconPath: '../../img/marker_yellow.png', position: { left: 10, top: 360, width: 35, height: 35 }, clickable: true }] } }), controltap: function (e) { console.log(e.controlId); # 控件id 1 } #可以通过在map上添加一个按钮，来实现诸如：定位、状态返回等操作。 #（直接通过布局文件在map上添加view是显示不出来的）
绑定事件
| 参数名 | 参数类型 | 描述 |
|---|---|---|
| bindmarkertap | EventHandel | 点击标记点时触发 |
| bindcontroltap | EventHandel | 点击控件时触发 |
| bindregionchange | EventHandel | 视野发生变化时触发 |
| bindtap | EventHandel | 点击地图时触发 |
BUG
关于经纬度，官方文档上都写的是Number类型。但是通过IDE调试的时候，写成字符串也是可以的。但是在IOS真机上运行时，markers却显示不出来，也不报错。
后来自己对照属性的类型，发现后台传来的经纬度是字符串类型的。而字符串类型的经纬度在IOS真机上经测试就是显示不出来。
所以将字符串转成Number类型即可。
附原始手册地址：http://blog.csdn.net/crazy1235/article/details/55004841
.
