記錄--uniapp map 製作一個簡單的地圖導航

来源:https://www.cnblogs.com/smileZAZ/archive/2022/11/08/16870705.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 先上效果 簡易map 在圖一的地圖中可以看到 a點 連接 到 b點, 基本信息 以及 基本的控制項(放大、縮小、回到某個指定的點),接下來我們分開逐步講解。 所需配置 需要先在manifest.json中的 app模塊中配置地圖,並添加相關 ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

先上效果

簡易map

在圖一的地圖中可以看到 a點 連接 到 b點, 基本信息 以及 基本的控制項(放大、縮小、回到某個指定的點),接下來我們分開逐步講解。

所需配置

需要先在manifest.json中的 app模塊中配置地圖,並添加相關地圖的key,如果沒有可在相關開發者平臺進行申請

 

配置好這一部分就可以開始使用map組件了

地圖標記點

在uniapp map中想創建標記點就需要使用到一個屬性 markers

我們先來看一下markers的常用屬性

名稱說明類型必填
id 標記點id number true
latitude 緯度 number true
longitude 經度 number true
iconPath 顯示的圖標 string false
callout 自定義標記點上方的氣泡框 Object false
label 為標記點傍邊增加標簽 Object false

查看更多請點擊這裡

瞭解過這些我們就可以使用markers屬性創建標記點了, markers屬性是數組類型的,所以應該這樣創建標記點

    this.covers = [ 
        {
            id: 1,
            latitude: 34.7486,
            longitude: 113.6709,
            iconPath: '../../static/shop.png',
            title: "目的地"
        }
    ];

如果想添加更多的標記點就可以繼續在數組中添加object

每個object都代表了一個標記點

掛載

    <map :markers="covers"></map>

坐標連線

想讓我們的坐標連線就需要使用到 polyline 屬性。

我們先來看一下polyline的常用屬性

名稱說明類型必填
points 經緯度數組 Array true
color 線的顏色 string false
width 線寬 Number false
iconPath 顯示的圖標 string false
arrowLine 帶箭頭的線 Boolean false
colorList 彩虹顯 Array false

平臺差異請點擊查看

這裡我們要註意 兩個坑,作者親踩

  1. polyline 屬性是一個數組

    polyline 之所以是一個數組是因為他可以同時創建多條線並且連線,每條線還可以有著不同的顏色、箭頭、圖標等。

  2. points 也是一個數組

    points之所以是一個數組是因為他要確定某一條線上的每一個點,且每個點都應該由經緯度構成

所以 polyline 的正確寫法應該是這樣的

    // 連線
    this.polyline = [
        // 第一條線
        {
            // 每個點的經緯度
            points: [{34.7486, 113.6709}, {28.7486, 113.6709}],
            // 顏色
            color: "#000",
            // 寬度
            width: 10
        }
    ]

如果想添加第二條線僅僅只需要在 polyline 中在添加一個 Object。 掛載

    <map :polyline="polyline"></map>

放大縮小

map 的放大縮依賴於 scale 屬性 所以只需要動態改變 scale 屬性的值就可以了。 但這裡要註意 scale 的取值範圍為 3~20,數字類型

這就是放大縮小功能的依賴

回到指定位置

想要地圖回到指定的位置也非常簡單,只需要使用 uni.createMapContext() 方法創建一個 mapContent 對象 在使用 附帶的 moveToLocatio 方法便可讓地圖回到指定的位置。

導航彈框

圖二中的地圖應用選擇彈框則是使用了 h5Plus

nativeUI.actionSheet 方法 創建了彈框

runtime.openURL 方法 打開了 導航軟體 或 h5 頁面導航

nativeUI情請點擊這裡查看

runtime情請點擊這裡查看

    // 導航 會打開導航菜單供用戶選擇
    openNavigation(longitude, latitude, name) {
        let url = ""; // app url
        let webUrl = ""; // web url 用來為用戶未安裝導航軟體時打開瀏覽器所使用url
        plus.nativeUI.actionSheet({ //選擇菜單
            title: "選擇地圖應用",
            cancel: "取消",
            buttons: [{title: "高德地圖"}] // 可選的地圖類型
        }, (e)=> {
                // 判斷用戶選擇的地圖
            switch (e.index) {
                //下麵是拼接url,不同系統以及不同地圖都有不同的拼接欄位
                case 1:
                    // 安卓
                    if(plus.os.name == "Android") {
                        url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
                    }else {
                        url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
                    }
                    webUrl = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${name}&src=mypage&coordinate=gaode`
                    break;
            }
                // 如果選中
            if (url != "") {
                url = encodeURI(url);
                // 打開 app 導航 
                plus.runtime.openURL(url, (err)=>{ // 失敗回到
                    // 如果失敗則說明未安裝 直接 打開網頁版進行導航
                    // 畢竟用戶可能沒有安裝app但一定安裝的有瀏覽器
                    plus.runtime.openURL(webUrl);
                });
            }
    })
}

這就是我導航彈窗實現的邏輯了, 這裡我僅僅只是用了高德地圖的選項,大家可以根據需要增加相應地圖app,其他常見的我放在下方了。

騰訊

app url

let appUrl = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=${騰訊地圖key}`

web url

let webUrl = `https://apis.map.qq.com/uri/v1/marker?marker=coord:經度,緯度;title:名稱;addr:地址&referer=myapp`

百度

app url

let appUrl = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`

web url

let webUrl = `http://api.map.baidu.com/marker?location=${latitude},${longitude}&title=${name}&content=${content}&output=html&src=webapp.baidu.openAPIdemo`

本文轉載於:

https://juejin.cn/post/7092055240270151717

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


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

-Advertisement-
Play Games
更多相關文章
  • 一、Installing RabbitMQ-3.10.2 on CentOS 7.9 1 地址 https://www.rabbitmq.com https://github.com/rabbitmq/rabbitmq-server https://github.com/rabbitmq/rabbi ...
  • 蘋果電腦哪款系統活動監控器好用呢?iStat Menus for mac是一款Mac OS電腦硬體信息監控軟體,提供的信息包括 CPU 使用情形、記憶體用量、硬碟使用情形、網路傳輸、機器溫度、風扇轉速等等。在新版本中,您還可以自由的對iStat Menus顯示的信息進行設置,將您關註的系統信息放在頂部 ...
  • redis集群搭建 一、安裝redis 源碼安裝: 1.下載源碼包: wget http://download.redis.io/releases/redis-6.0.7.tar.gz 2.解壓到指定目錄下: tar xf redis-6.0.7.tar.gz -C /usr/local/ 二、編譯 ...
  • 背景 建議至少提交兩份測試報告(從一、二選擇兩個測試case) 一、任選一(建議結合業務選擇,簡單線上業務選tpcb,複雜線上業務選tpcc,偏分析業務選tpch) tpcc tpcb tpch 二、任選一(建議結合業務場景選擇) 並行計算,選擇 RDS PG 12 進行測試 GIS,選擇 RDS ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者:YeJinrong/葉金榮 意外發現USER()和CURRENT_USER()的一點不同。 某次在用 ALTER USER 想要修改賬戶密碼時,發 ...
  • 2022年11月7日,Taier1.3版本正式發佈! Taier 是一個大數據分散式可視化的DAG任務調度系統,旨在降低ETL開發成本、提高大數據平臺穩定性,大數據開發人員可以在 Taier 直接進行業務邏輯的開發,而不用關心任務錯綜複雜的依賴關係與底層的大數據平臺的架構實現,將工作的重心更多地聚焦 ...
  • 1 背景與目標 1.1 背景 國際財務泰國每月月初賬單任務生成,或者重算賬單數據,數據同步方案為mysql通過binlake同步ES數據,在同步過程中發現計費事件表,計費結果表均有延遲,ES數據與Mysql數據不一致,導致業務頁面查詢數據不准確,部分核心計算通過ES校驗失敗 1.2目標 解決binl ...
  • 好家伙,JS基礎接著學, 本篇內容為《JS高級程式設計》第三章學習筆記 1.變數 ECMAScript 變數是鬆散類型的,意思是變數可以用於保存任何類型的數據。 (確實鬆散,不像C或C++那樣,分int,float,char等等...,一個變數可以用來保存任何類型的數據) 每個變數只不過是一個用於保 ...
一周排行
    -Advertisement-
    Play Games
  • 隨著Aspire發佈preview5的發佈,Microsoft.Extensions.ServiceDiscovery隨之更新, 服務註冊發現這個屬於老掉牙的話題解決什麼問題就不贅述了,這裡主要講講Microsoft.Extensions.ServiceDiscovery(preview5)以及如何 ...
  • 概述:通過使用`SemaphoreSlim`,可以簡單而有效地限制非同步HTTP請求的併發量,確保在任何給定時間內不超過20個網頁同時下載。`ParallelOptions`不適用於非同步操作,但可考慮使用`Parallel.ForEach`,儘管在非同步場景中謹慎使用。 對於併發非同步 I/O 操作的數量 ...
  • 1.Linux上安裝Docken 伺服器系統版本以及內核版本:cat /etc/redhat-release 查看伺服器內核版本:uname -r 安裝依賴包:yum install -y yum-utils device-mapper-persistent-data lvm2 設置阿裡雲鏡像源:y ...
  • 概述:WPF界面綁定和渲染大量數據可能導致性能問題。通過啟用UI虛擬化、非同步載入和數據分頁,可以有效提高界面響應性能。以下是簡單示例演示這些優化方法。 在WPF中,當你嘗試綁定和渲染大量的數據項時,性能問題可能出現。以下是一些可能導致性能慢的原因以及優化方法: UI 虛擬化: WPF提供了虛擬化技術 ...
  • 引言 上一章節介紹了 TDD 的三大法則,今天我們講一下在單元測試中模擬對象的使用。 Fake Fake - Fake 是一個通用術語,可用於描述 stub或 mock 對象。 它是 stub 還是 mock 取決於使用它的上下文。 也就是說,Fake 可以是 stub 或 mock Mock - ...
  • 為.net6在CentOS7上面做準備,先在vmware虛擬機安裝CentOS 7.9 新建CentOS764位的系統 因為CentOS8不更新了,所以安裝7;簡單就一筆帶過了 選擇下載好的操作系統的iso文件,下載地址https://mirrors.aliyun.com/centos/7.9.20 ...
  • 經過前面幾篇的學習,我們瞭解到指令的大概分類,如:參數載入指令,該載入指令以 Ld 開頭,將參數載入到棧中,以便於後續執行操作命令。參數存儲指令,其指令以 St 開頭,將棧中的數據,存儲到指定的變數中,以方便後續使用。創建實例指令,其指令以 New 開頭,用於在運行時動態生成並初始化對象。方法調用指... ...
  • LiteDB 是一個輕量級的嵌入式 NoSQL 資料庫,其設計理念與 MongoDB 類似,但它是完全使用 C# 開發的,因此與 C# 應用程式的集成非常順暢。與 SQLite 相比,LiteDB 提供了 NoSQL(即鍵值對)的數據存儲方式,並且是一個開源且免費的項目。它適用於桌面、移動以及 We ...
  • 1 開源解析和拆分文檔 第三方的工具去對文件解析拆分,去將我們的文件內容給提取出來,並將我們的文檔內容去拆分成一個小的chunk。常見的PDF word mark down, JSON、HTML。都可以有很好的一些模塊去把這些文件去進行一個東西去提取。 優勢 支持豐富的文檔類型 每種文檔多樣化選擇 ...
  • OOM是什麼?英文全稱為 OutOfMemoryError(記憶體溢出錯誤)。當程式發生OOM時,如何去定位導致異常的代碼還是挺麻煩的。 要檢查OOM發生的原因,首先需要瞭解各種OOM情況下會報的異常信息。這樣能縮小排查範圍,再結合異常堆棧、heapDump文件、JVM分析工具和業務代碼來判斷具體是哪 ...