手撸微信小程序map踩坑记

1,955 阅读3分钟

最近撸了一个微信小程序,map接入踩了不少坑。

1小程序map文档

2腾讯地图接入小程序 SDK

3其它坐标批量转换腾讯系坐标

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