基於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調試，會返回到最近的政府的位置，不用擔憂這不是你代碼有問題是他機制就這樣

使用真機調試就能夠恢復正常

總結

嘖，這個東西其實不算難寫，就是麻煩點，麻煩在處理後端返回的數據上，固然處理數據就得仁者見仁智者見智了，你是邏輯就是啥邏輯，這不是我能夠寫出來的東西；更麻煩的就是，微信小程序開發其實對初學者不太友好，能參考的資料很雜又講不清楚，有的時候十篇博客可能有十種失敗的方法，總體寫下來的時候很考驗開發人員的抗壓能力。若是實在沒法解決那其實能夠先寫一個靜態的數據嘗試一下效果，再慢慢擴充。必要的時候使用打印調試法來檢查每一步的數據，是真滴好用！