基于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这种东西？

微信小程序官方文档又是吃什么饭的？

微信开发者社区是拿来干吗的？

渲染层失败

在第不知道多少次写完绘图代码后，我机械的点了运行，发现了渲染层失败一长排的提示

解决方法：

一、肯定好本身所须要渲染的属性名称是否规范，如marker数组中的icon，polygon数组中的points

二、肯定所须要渲染的对象是否非空，如果空你也渲染不错东西来，就是渲染了个寂寞！

三、牛头不对马嘴，确认好渲染对象的值

不算坑 算个小tips

使用微信开发者工具获取本地定位时，若是是PC调试，会返回到最近的政府的位置，不用担忧这不是你代码有问题是他机制就这样

使用真机调试就能够恢复正常

总结

啧，这个东西其实不算难写，就是麻烦点，麻烦在处理后端返回的数据上，固然处理数据就得仁者见仁智者见智了，你是逻辑就是啥逻辑，这不是我能够写出来的东西；更麻烦的就是，微信小程序开发其实对初学者不太友好，能参考的资料很杂又讲不清楚，有的时候十篇博客可能有十种失败的方法，总体写下来的时候很考验开发人员的抗压能力。若是实在没法解决那其实能够先写一个静态的数据尝试一下效果，再慢慢扩充。必要的时候使用打印调试法来检查每一步的数据，是真滴好用！