基于uni-app框架的微信小程序map组件开发
基于uni-app框架的微信小程序map组件开发
前言：
在第一次作业中我为自己设想的开发方向是后端开发，学习springboot框架的一系列内容，结果我们的组员一半都会springboot？结果我就义无反顾的扛起了小程序编（mo）码（yu）大棋。
技术概述
uni-app是基于vue框架衍生出的框架
说通俗点这个技术其实就是平时用的高德地图类似的导航工具，但实际上他要处理的东西还蛮麻烦的
我们平时会在交通出行上使用到map组件，地图其实可以在很多地方自由运用
学习该技术的原因：团队需要我
技术难点：参考资料少，小程序开发文档难懂（划重点）、例子特别少！
技术详述
先知道要用的是map标签 不是mAp 不是Map 更不是mαp
以下是基本语法，<map>标签需要包含在<view>中
<view>
<map />
</view>
他有好多好多参数可以选择
<view>
<!-- 地图组件 -->
<!-- 属性从上到下依次是 经纬度 id 标记点 显示用户位置 图上的多边形 样式 最小缩放 最大缩放 点击marker触发的动作-->
<map latitude ="latitude"
longitude="longitude"
id="parkingMap"
markers="covers"
show-location="true"
polygons="polygons"
style="width: 100%;"
min-scale="minScale"
max-scale="maxScale"
@markertap="clickMarker"
/>
</view>
但是实际上起作用的却是js代码
许多代码都是封装好的，所以用起来很简单
都是直接调用函数，没有什么流程！！！不需要流程图辣
返回用户当前位置功能
moveToCenter() {
//获取一下你自己定义的map 其中parkingMap是map组件里id的值
let mapCtx = uni.createMapContext('parkingMap', this)
//调用方法即可返回中心点
mapCtx.moveToLocation()
}
点击标记点事件
clickMarker(res) {
//获取点击的markerId，其中markerId是微信小程序marker属性中所拥有的Id
let data = this.covers.find(item => item.id == res.target.markerId)
//接下来就可以对data，也就是获取到的目标进行需要的操作
……
}
获取用户位置
getLocation() {
// 使用Promise包装uni.getLocation, 增加可读性（有回调函数的方法都可以这样做）
new Promise((resolve, rejected) => {
//这里采用的是微信小程序封装的api getLocation，来获取用户的当前地理位置
uni.getLocation({
type: 'gcj02',
timeout: '2000',
success: res => resolve(res),
fail: err => rejected(err)
})
}).then(res => {
//假如初次没有使用show-Location属性便可以使用这种方法来赋予地图经纬度的初始位置
this.longitude = res.longitude
this.latitude = res.latitude
}).catch(err => {
//错误处理
uni.showToast({
title: '位置信息获取失败（请检查定位功能是否打开）',
icon:'none',
})
})
}
调用腾讯地图服务实现导航
//根据经纬度导航至目的地
navigateTo(nLatitude, nLongitude, nName) {
let plugin = requirePlugin('routePlan')
//使用在腾讯位置服务申请的key
let key = '*****-*****-*****-*****-MLB5J-OPFO7'
//调用插件的app的名称
let referer = 'STOP'
//目的地信息
let endPoint = JSON.stringify({
'name': nName,
'latitude': nLatitude,
'longitude': nLongitude
})
//使用封装函数
uni.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
})
}
地图上多边形的绘画
使用的是polygons属性
基本格式如下：
let polygons = [{
//多边形边框的宽度
strokeWidth: 3,
//多边形边框的颜色
strokeColor: '#266339',
//多边形填充的颜色
fillColor: '#7FFFAA30',
//多边形顶点的数组，建议按照连接顺序排序，不然可能出现不应该的交叉现象
points: [{
latitude: "26.060929253238374",
longitude: "119.1981588742523"
},{……}]
}
想要在map中显示，只需要添加对应属性
<map :polygons="polygons"/>
在页面添加不同组件组件时遇到的坑
cover-view坑
说实话，这个东西是真的难用
有的博客说他是这样用
<view>
<map>
<cover-view>
<cover-imgae/>
</cover-view>
</map>
</view>
但是你实际上发现，他其实这样用也不能显示在map上面，就连微信小程序官方文档都说不清楚！
然后我又尝试了这样的方法
<view>
<map/>
<cover-view>
<cover-imgae/>
</cover-view>
</view>
很巧的是，果然还是没用啊
于是我心态崩了，选择直接用绝对定位去处理他
<view>
<map/>
<view style="position: absolute;top: 40%;left: 87%;">
<img/>
</view>
</view>
然后他就神奇的可以了？
？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？
我至今想不明白，如果这样可以，那为什么还需要cover-view这种东西？
微信小程序官方文档又是吃什么饭的？
微信开发者社区是拿来干嘛的？
渲染层失败
在第不知道多少次写完绘图代码后，我机械的点了运行，发现了渲染层失败一长排的提示
解决方法：
1、确定好自己所需要渲染的属性名称是否规范，如marker数组中的icon，polygon数组中的points
2、确定所需要渲染的对象是否非空，若是空你也渲染不错东西来，就是渲染了个寂寞！
3、牛头不对马嘴，确认好渲染对象的值
不算坑 算个小tips
使用微信开发者工具获取本地定位时，如果是PC调试，会返回到最近的政府的位置，不用担心这不是你代码有问题是他机制就这样
使用真机调试就可以恢复正常
总结
啧，这个东西其实不算难写，就是麻烦点，麻烦在处理后端返回的数据上，当然处理数据就得仁者见仁智者见智了，你是逻辑就是啥逻辑，这不是我可以写出来的东西；更麻烦的就是，微信小程序开发其实对初学者不太友好，能参考的资料很杂又讲不清楚，有的时候十篇博客可能有十种失败的方法，整体写下来的时候很考验开发人员的抗压能力。如果实在无法解决那其实可以先写一个静态的数据尝试一下效果，再慢慢扩充。必要的时候使用打印调试法来检查每一步的数据，是真滴好用！
