最近撸了一个微信小程序,map接入踩了不少坑。
1:创建
简单的创建一个小程序,创建一个map文件夹,开始我们的手撸之旅
2:配置
微信小程序自带了部分map功能,设置一些定位点,但是如果需要更强大的查询功能就需要接入地图api,常用的高德/百度/搜狗都有小程序接入的api,为了方便调试以及兼容性更好我们选择了他们自家的腾讯地图。 map.js
var QQMapWX = require('..//utils/qqmap-wx-jssdk.js');//地图接入js文件需要下载
var qqmapsdk = new QQMapWX({
key: '5IEBZ-O7UWD-O2S4L-PJJFK-P6DPO-xxxx' // 必填key
});
key的申请办法在链接2里有具体的操作步骤
坑1
填key有时候会报 apis.map.qq.com 是不合法域名的错误。需要添加request合法域名
微信开放平台 > 开发 > 开发设置 > 服务器域名
3:定位点/多点
map.wxml
<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>
一般常用的主要是 longitude latitude 坐标,也是你当前显示地图的位置
scale:缩放级别
style :样式【一般只设置高度】
markers:标记点【常用】
标记点可以设置一个或者多个标记点,具体文档在1链接
addMarkers: function (data) { //方法名称
var that = this //改变指向
var mks = [] //数组容器
for (var i = 0; i < length; i++) {
mks.push({ // 将数据坐标,放到mks数组中
latitude: that.data[i].lat,
longitude: that.data[i].lng,
iconPath: icon, //图标路径
zIndex: -1,
callout: { //点击定位点弹出的名称框
content: that.data[i].name, //框内显示的名称
color: '#000000', //字体颜色
borderRadius: 10, //边框圆角
borderWidth: 1, //边框宽度
borderColor: '#FF0202', //边框颜色
bgColor: '#ffffff', //背景色
padding: 5, //文本边缘留白
textAlign: 'center', //居中
display: 'ALWAYS' //名称弹框的显示 'BYCLICK'点击显示 【常用】
},
})
}
that.setData({ //setData:将数据传到更新到data【常用】
markers: mks,
})
}
多点显示效果
4:polygon 多边形
有时候需要画出地域块,多边形,就要用到map里面的polygon 其中points里放的是多边形的坐标
var ring2 = [{latitude: 30.003894, longitude: 120.888613}] //坐标数组
polygon: [{
points: ring2,
strokeWidth: 1, // 描边的宽度
strokeColor: '#E33E33', //描边的颜色
fillColor: '#e0b9b7' //填充颜色
}]
使用方法:map.wxml 里map标签塞入 polygons="{{polygon}}" 效果:
坑1
有时候会出现坐标点提示框与多边形覆盖遮挡的问题【用zIndex属性解决】
坑2
多边形坐标点数组可能有上限【极限点还没试过,我试过二十多个点是可画的】
5:坐标系转换
因为数据源的坐标可能是GPS坐标或者火星坐标,也可能是别的地图带来坐标。腾讯地图有自带转换坐标的方法,方便定位准确度 接口在顶部链接3
locations=39.12,116.83;30.21,115.43 //locations格式
wx.request({
url: 'https://apis.map.qq.com/ws/coord/v1/translate', //转换地址
data: {
locations: locations, // 传入坐标
type: 1, //传入的类型 链接三里面有介绍
key: '5IEBZ-O7UWD-O2S4L-PJJFK-P6DPO-xxx' //你的key
},
success(res) {
console.log(res.data) //返回的坐标,在locations里
}
}),
坑1
locations格式注意点:多个坐标之间是分号隔开,但是最后一个是不用传分号的。
locations = locations.substring(0, locations.lastIndexOf(';'));
//去掉最后一个分号
坑2
坐标系转换是有字符串上限的,1000为基准,所以超过了就要分批量转换
解决提示:Promise