前言
1.相关API
本文使用的是百度地图API,百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。 百度地图JavaScript API支持HTTP和HTTPS,免费对外开放,可直接使用。接口使用无次数限制。在使用前,您需先申请密钥(ak)才可使用。
接口地址:http://api.map.baidu.com/geoconv/v1/?
参数 | 含义 | 取值范围 | 是否必须 | 默认取值 |
---|---|---|---|---|
coords | 源坐标 | 格式:经度,纬度;经度,纬度…,限制:最多支持100个,格式举例:114.21892734521,29.575429778924;114.21892734521,29.575429778924 | 是 | 无 |
ak | 开发者密钥 | 是 | 无 | |
sn | 用户的权限签名 | 否 | 若用户所用ak的校验方式为sn校验时该参数必须。 (sn生成算法) | |
from | 源坐标类型 | 取值为如下:1:GPS设备获取的角度坐标;2:GPS获取的米制坐标、sogou地图所用坐标;3:google地图、soso地图、aliyun地图、mapabc地图和amap地图所用坐标4:3中列表地图坐标对应的米制坐标5:百度地图采用的经纬度坐标6:百度地图采用的米制坐标7:mapbar地图坐标;8:51地图坐标 | 否 | 默认为1,即GPS设备获取的坐标 |
to | 目的坐标类型 | 有两种可供选择:5、6。5:bd09ll(百度经纬度坐标),6:bd09mc(百度米制经纬度坐标); | 否 | 默认为5,即bd09ll(百度坐标) |
output | 返回结果格式 | json或者xml | 否 | json |
返回值说明
名称 | 类型 | 含义 | 取值范围 |
---|---|---|---|
status | init | 状态码 | 正常0,异常非0,详细见状态码说明 |
result | json或者xml数组 | 转换结果 | 与输入顺序一致 |
x | float | 横坐标 | |
y | float | 纵坐标 |
一、地图展示
1.js
setMapMarkers() {
var _this = this
var stationList = _this.data.stationList
for (var i = 0; i < stationList.length; i++) {
(function (i) {
wx.request({
url: 'http://api.map.baidu.com/geoconv/v1/',
data: {
ak: config.Config.bmapkey,
coords: stationList[i].lng + ',' + stationList[i].lat,
from: 5, //百度地图采用的经纬度坐标;
to: 3 //国测局(gcj02)坐标;
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
// console.log(res)
var lnglat = res.data.result[0]
var marker = {}
marker.iconPath = '../../imgs/location.png'
marker.id = i
marker.latitude = lnglat.y
marker.longitude = lnglat.x
marker.width = 20
marker.height = 20
marker.callout = {
content: stationList[i].station,
color: 'red',
bgColor: '#fcfcfc',
padding: 3,
fontSize: 18,
borderRadius: 10,
display: 'BYCLICK',
textAlign: 'left'
}
var markers = _this.data.markers
markers.push(marker)
_this.setData({
markers: markers
})
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
// console.log(res);
}
})
})(i)
}
},
2.wxml
<view class="map" wx:if="{{type=='2'}}">
<map id="map" longitude="{{locationInfo.longitude}}" latitude="{{locationInfo.latitude}}" scale="16" markers='{{markers}}' bindcallouttap='callouttap' show-location style="width: 100%;height:430px;"></map>
</view>
标签:yyds,04,微信,stationList,地图,坐标,res,marker,百度
From: https://blog.51cto.com/u_15437432/5908687