微信小程式地圖開發總結

来源:https://www.cnblogs.com/Yellow-ice/archive/2019/07/04/11133283.html
-Advertisement-
Play Games

最近在做一個微信小程式地圖插件，通過傳入起始位置名稱和經緯度信息，就可以跳轉到路線規劃插件頁面中，在該頁面中，可以根據起始位置查詢自駕，公共交通，步行等方式的路線信息，並且在地圖上顯示路線信息，在這個過程中，用到了微信小程式的組件map和騰訊地圖sdk，接下來主要對微信小程式的地圖開發進行總結 一、 ...


　　最近在做一個微信小程式地圖插件，通過傳入起始位置名稱和經緯度信息，就可以跳轉到路線規劃插件頁面中，在該頁面中，可以根據起始位置查詢自駕，公共交通，步行等方式的路線信息，並且在地圖上顯示路線信息，在這個過程中，用到了微信小程式的組件map和騰訊地圖sdk，接下來主要對微信小程式的地圖開發進行總結

 

一、微信小程式地圖組件

　　為了方便微信小程式使用地圖的相關功能，微信小程式為我們提供了map組件，通過這個組件，我們可以很簡單的引入地圖，並且還可以進行個性化地圖的開發

1、map組件

　　微信小程式提供的地圖組件，使用該組件只需要在wxml文件中加入下麵的代碼

<map id="map" longitude="113.324520" latitude="23.099994" scale="14" style="width: 100%; height: 300px;"></map>

　　上面這個例子中，我們只是簡單的為該組件傳入經緯度信息，並且設置縮放級別，當然，map組件還包括以下一些常用的屬性

屬性 類型 說明 是否必填
longitude number 中心經度 是
latitude number 中心緯度 是
scale number 縮放級別，取值範圍為3-20 否
markers Array.<marker> 標記點 否
polyline Array.<polyline> 路線 否
include-points Array.<point> 縮放視野以包含所有給定的坐標點 否
enable-traffic boolean 是否開啟實時路況 否
bindregionchange eventhandle 視野發生變化時觸發 否
bindpoitap eventhandle 點擊地圖poi點時觸發 否

　　其中，longitude和latitude這兩個屬性是必須填寫的，如果沒有填寫，地圖將無法正常顯示，除了上面的屬性之外，還有很多其它屬性，其它屬性請前往微信小程式官方文檔進行查看

2、map組件常用的屬性介紹

（1）longitude和latitude屬性

　　一般來說，我們需要設置地圖的中心經緯度地圖才能夠正常顯示，如果我們傳入的是起點經緯度srcLat和srcLng，終點經緯度dstLat和dstLng，如果想要得到其中心坐標，可以通過如下的計算得到：

　　centerLat = (srcLat + dstLat) / 2

　　centerLng = (srcLng + dstLng) / 2

　　通過以下簡單的計算，就可以設置出地圖的中心經緯度

（2）markers屬性

　　在很多情況下，我們經常需要在地圖上添加一些標記點，比如我們希望插件中指定的起點和終點都能夠用自定義的圖標進行表示，這個時候就可以用到markers屬性啦

Page({
  data: {
    markers: [{
      iconPath: "/resources/start.png",
      id: 0,
      latitude: srcLat,
      longitude: srcLng,
      width: 50,
      height: 50
    },
    {
      iconPath: "/resources/end.png",
      id: 0,
      latitude: dstLat,
      longitude: dstLng,
      width: 50,
      height: 50
    }]
})

（3）polyline屬性

　　polyline屬性主要指定一系列坐標點，當我們設置了這些坐標點之後，將會從這些坐標點的第一個坐標點連線連到最後一個坐標點，當我們需要在地圖上顯示起點和終點之間的路線時，就可以用polyline屬性進行設置

Page({
  data: {
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color:"#FF0000DD",
      width: 2,
      dottedLine: true
    }]
})

　　關於polyline屬性的具體屬性介紹，可以查看微信小程式官方文檔

3、地圖相關的API

　　為了更好的使用地圖的功能，微信小程式也是為我們提供了關於操作地圖的相關API

　　（1）wx.createMapContext(string mapId, Object this)

　　　　創建map上下文MapContext 對象

　　（2）MapContext.getCenterLocation(Object object)

　　　　獲取當前地圖中心的經緯度

　　（3）MapContext.getRegion(Object object)

　　　　獲取當前地圖的視野範圍

　　（4）MapContext.getScale(Object object)

　　　　獲取當前地圖的縮放級別

　　（5）MapContext.includePoints(Object object)

　　　　縮放視野展示所有經緯度

　　（6）MapContext.moveToLocation()

　　　　將地圖中心移動到當前定位點

　　（7）MapContext.translateMarker(Object object)

　　　　平移marker，帶動畫

　　使用上面的這些API，可以方便我們對map組件進行一些操作，下麵來看個簡單的例子

<map id="myMap" show-location />

<button type="primary" bindtap="getCenterLocation">獲取位置</button>

　　當點擊獲取位置時，我們可以通過相關的API進行獲取當前的中心位置

Page({
  onReady: function (e) {
    // 使用 wx.createMapContext 獲取 map 上下文
    this.mapCtx = wx.createMapContext('myMap')
  },
  getCenterLocation: function () {
    this.mapCtx.getCenterLocation({
      success: function(res){
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })
  }
})

4、使用位置服務相關的API

　　在進行地圖開發的時候，我們經常需要使用內置軟體，高德地圖，騰訊地圖這些進行導航，這個時候可以使用相關的位置服務API

　　（1）wx.openLocation(Object object)

　　　　使用微信內置地圖查看位置

　　（2）wx.getLocation(Object object)

　　　　獲取當前的地理位置、速度

　　（3）wx.chooseLocation(Object object)

　　　　打開地圖選擇位置

　　當我們指定一個終點位置，然後希望能夠使用內置地圖軟體進行導航時，可以這樣實現

wx.openLocation({
     latitude: dstLat,
     longitude: dstLng,
     name: '終點名稱'
})

 5、使用map組件的一些問題

　　map組件提供了很多地圖的相關功能，但是使用map組件可能會遇到下麵這些問題

　　（1）map組件及微信小程式的API無法提供路線規劃，地址轉換等功能

　　　可以使用騰訊地圖sdk，高德地圖sdk，百度地圖sdk等進行開發，比如騰訊位置服務為微信小程式提供了基礎的標點能力、線和圓的繪製介面等地圖組件和位置展示、地圖選點等地圖API位置服務能力支持，使得開發者可以自由地實現自己的微信小程式產品，通過使用這些服務，再配合map組件，可以開發出具有各種各樣功能的地圖

　　（2）map組件的層級問題

　　　　map組件的層級被設置為最高，不能通過z-index進行設置，因此使用map組件可能會遮住一些文字圖片等內容，可以通過cover-view進行解決，將文字和圖片內容嵌套在cover-view中，但是cover-view只能嵌套cover-view和cover-image

 

二、在微信小程式中使用騰訊地圖服務

　　雖然map組件使我們可以很方便的使用地圖，但是map組件只提供了最基本的地圖顯示功能，同時，微信小程式提供的關於地圖的API也只是提供了一些簡單的功能，在實際中無法滿足我們的各種需求，如果需要使用到路線規劃，距離計算等功能，我們可以在微信小程式中接入騰訊地圖，高德地圖，百度地圖等服務，再結合map組件，去實現我們需要的功能

　　下麵以騰訊地圖為例來介紹如何在微信小程式中使用騰訊地圖服務

1、密鑰的申請以及功能變數名稱的設置

　　在微信小程式中使用騰訊地圖服務大致需要進行如下幾個過程：

　　（1）申請開發者密鑰

　　　　

　　　　這裡需要填寫Key的名稱，名稱可以根據實際項目應用來命名，申請成功後，會生成一串開發者密鑰

　　（2）開通webserviceAPI服務

　　　　a、點擊右上角的控制台

　　　　b、選擇key管理

　　　　c、進入設置，勾選webserviceAPI，點擊保存

　　（3）功能變數名稱的配置

　　　　上面的兩個步驟都是在騰訊位置服務平臺上進行的操作，要進行功能變數名稱的配置，還需要登錄微信公眾平臺進行功能變數名稱的配置

　　　　在開發小程式時，我們都會使用自己的APPID進行開發，只有配置了相關的功能變數名稱，在請求時才能向指定的功能變數名稱發送請求

　　　　在“設置” -> “開發設置”中設置request合法功能變數名稱，添加https://apis.map.qq.com

　　（4）下載微信小程式JavaScriptSDK

　　如果完成了上面幾個步驟，我們就可以在微信小程式中使用騰訊地圖服務啦，在微信小程式中新建一個項目，寫入APPID，記得這個APPID需要在微信公眾平臺中進行了功能變數名稱的配置，不然會報錯

2、實現路線規劃

　　下麵舉一個簡單的小例子，給定起點和終點經緯度，計算出起點和終點之間的路線

　　首先，需要引入我們剛纔下載的JavaScriptSDK

// 引入SDK核心類
var QQMapWX = require('xxx/qqmap-wx.js');

　　進行API核心類的實例化

// 實例化API核心類
var qqmapsdk = new QQMapWX({
    key: '開發密鑰（key）' // 必填
});

　　接著，我們需要通過調用路線規劃的介面direction獲取路線，direction介面可以提供駕車、騎行、步行、公交等路線規劃功能

　　direction介面傳入的參數如下

　　（1）mode

　　　　String，路線規劃選擇，可選值：'driving'（駕車）、'walking'（步行）、'bicycling'（騎行）、'transit'（公交），預設：'driving'

　　（2）from

　　　　String格式：lat<緯度>,lng<經度>（例：from: '39.984060,116.307520'）

　　　　Object格式：{latitude: 緯度,longitude: 經度}（例：from: { latitude: 39.984060,longitude: 116.307520}）

　　（3）to

　　　　String格式：lat<緯度>,lng<經度>（例：location: '39.984060,116.307520'）

　　　　Object格式：{latitude: 緯度,longitude: 經度}（例：to: { latitude: 39.984060,longitude: 116.307520}）

　　下麵給一個根據起點和終點實現路線規劃的例子

<!--wxml-->
<map id="myMap" style="width: 100%; height: 300px;"
longitude="{{longitude}}" latitude="{{latitude}}" scale='16' polyline="{{polyline}}" show-location></map>

<!--js-->
// 引入SDK核心類
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 實例化API核心類
var qqmapsdk = new QQMapWX({
    key: '開發密鑰（key）' // 必填
});
Page({
    data: {
        srcLat: '起點經度',
        srcLng: '起點緯度',
        dstLat: '終點經度',
        dstLng: '起點緯度',
        latitude: '',
        longitude: ''
    },
    onLoad() {
        var _this = this;
        //調用距離計算介面
        qqmapsdk.direction({
            mode: 'driving',//可選值：'driving'（駕車）、'walking'（步行）、'bicycling'（騎行），不填預設：'driving',可不填
      //from參數不填預設當前地址
          from: {
              latitude: _this.data.srcLat,
              longitude: _this.data.srcLng
          },
          to: {
              latitude: _this.data.dstLat,
              longitude: _this.data.dstLng
          }, 
          success: function (res) {
              console.log(res);
              var ret = res;
              var coors = ret.result.routes[0].polyline, pl = [];
              //坐標解壓（返回的點串坐標，通過前向差分進行壓縮）
              var kr = 1000000;
              for (var i = 2; i < coors.length; i++) {
                  coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
              }
              //將解壓後的坐標放入點串數組pl中
              for (var i = 0; i < coors.length; i += 2) {
                  pl.push({ latitude: coors[i], longitude: coors[i + 1] })
              }
              console.log(pl)
              //設置polyline屬性，將路線顯示出來,將解壓坐標第一個數據作為起點
              _this.setData({
                  latitude:pl[0].latitude,
                  longitude:pl[0].longitude,
                  polyline: [{
                      points: pl,
                      color: '#FF0000DD',
                      width: 4
                  }]
               })
          },
          fail: function (error) {
              console.error(error);
          },
          complete: function (res) {
              console.log(res);
           }
       });
        
    }
})

　　騰訊地圖服務還提供了距離計算等其它功能，具體功能可以查看騰訊地圖服務官方文檔

 

　　剛開始接觸微信小程式，還有很多東西需要學習，大家一起交流學習呀

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • css3 text-fill-color屬性
    text-fill-color是什麼意思呢？單單從字面上來看就是“文本填充顏色”,不過它實際也是設置對象中文字的填充顏色，和color的效果很相似。如果同時設置text-fill-color和color兩個屬性，則text-fill-color會覆蓋掉color的值。 由於text-fill-col ...
  • 仿EXCEL插件，智表ZCELL產品V1.7 版本發佈，增加自定義右鍵菜單功能
    詳細請移步 智表（ZCELL）官網 www.zcell.net 更新說明 這次更新主要應用戶要求，主要解決了自定義右鍵菜單事件的支持，並新增了公式中自定義函數傳參、快捷鍵剪切等功能，歡迎大家體驗使用。 本次版本更新內容如下： 版本： V1.7發佈日期：2019-07-05 1.優化公式中的自定義函數 ...
  • 關於創建Web圖像時應記住的五個要素
    1. 格式與下載速度 當前，Web上用的最廣泛的三種格式是GIF、PNG和JPEG。我們的目標是選擇質量最高，同時文件最小的格式。 WebP圖像格式 谷歌建立了另一種圖像格式，名為WebP。 這種格式既支持有損壓縮也支持無損壓縮，它產生的文件大小也遠小於JPEG和PNG。跟PNG一樣，它還支持alp ...
  • Vue父子，子父，非父子組件之間傳值
    Vue組件基礎 純屬隨筆記錄，具體詳細教程，請查閱vue.js網站 子組件給父組件傳值: 父組件給子組件傳值: 非父子組件間傳值： ` ...
  • 深入V8引擎-AST(5)
    懶得發首頁了，有時候因為貼的代碼太多會被下，而且這東西本來也只是對自己學習的記錄，閱讀體驗極差，所以就本地自娛自樂的寫著吧！ 由於是解析字元串，所以在開始之前介紹一下詞法結構體中關於管理字元串類的屬性。之前在TokenDesc中，有兩個屬性，如下。 當時沒有詳細講，主要也是比較麻煩，在這裡介紹一下該 ...
  • layui 查詢無效問題
    【熱身話題】 在開發的過程中，大量數據的展示大多採用表格的方式，直觀，清晰。在這裡，我也使用過一些框架Bootstrap.table ，Dev table ,layui table。本次採用的layui table。用表格展示數據的同時會提供豐富的查詢條件去篩選相應的數據。由於大量的數據，一般都會使 ...
  • formData詳細使用教程
    formData是ajax2.0(XMLHttpRequest Level2)新提出的介面,利用FormData對象可以將form表單元素的name與value進行組合,實現表單數據的序列化,從而介紹表單元素的拼接,提高工作效率 創建formData對象 FormData提供的方法 FormData ...
  • Vue SSR初探
    因為之前用nuxt開發過應用程式，但是nuxt早就達到了開箱即用的目的，所以一直對vue ssr的具體實現存在好奇。 完整代碼可以查看 "https://github.com/jinghaoo/vuessr template" 構建步驟 我們通過上圖可以看到，vue ssr 也是離不開 的打包。 利 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類