搜尋
首頁web前端uni-app利用uniapp開發一個簡單的地圖導航

怎麼利用uniapp開發一個簡單的地圖導航?本篇文章就來提供大家一個製作簡單地圖的思路,希望對大家有幫助!

利用uniapp開發一個簡單的地圖導航

先來看看效果圖

利用uniapp開發一個簡單的地圖導航

利用uniapp開發一個簡單的地圖導航

簡易map

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

所需設定

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

利用uniapp開發一個簡單的地圖導航

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

地圖標記點

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

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

##longitude經度numbertrueiconPath已顯示的圖示stringfalsecallout自訂標記點上方的氣泡框Objectfalse#label為標記點傍邊增加標籤Objectfalse
#說明 #型別 必填
id 標記點id number # true
latitude 緯度 number true
##看更多請看:

https://uniapp.dcloud.io/component/map.html

了解這些我們就可以使用
markers

屬性創建標記點了, markers屬性是數組類型的,所以應該這樣創建標記點<pre class='brush:php;toolbar:false;'> this.covers = [ { id: 1, latitude: 34.7486, longitude: 113.6709, iconPath: &amp;#39;../../static/shop.png&amp;#39;, title: &quot;目的地&quot; } ];</pre>如果想添加更多的標記點就可以繼續在數組中添加

object

每個

object

都代表了一個標記點

掛載

<pre class='brush:php;toolbar:false;'> &lt;map :markers=&quot;covers&quot;&gt;&lt;/map&gt;</pre>

座標連線想讓我們的座標連線就需要使用到

polyline

屬性。 我們先來看看

polyline

的常用屬性

pointscolorwidth#iconPath##string falsearrowLine帶箭頭的線Booleanfalse#colorList彩虹顯Arrayfalse
#說明 #類型 必填
經緯度數組 Array true
線的顏色 string false
線寬 Number false
顯示的圖示
#false############

平台差异请查看

https://uniapp.dcloud.io/component/map.html#app平台地图服务商差异

这里我们要注意 两个坑,作者亲踩

  • polyline 属性是一个数组

    polyline 之所以是一个数组是因为他可以同时创建多条线并且连线,每条线还可以有着不同的颜色、箭头、图标等。

  • 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,数字类型

这就是放大缩小功能的依赖

利用uniapp開發一個簡單的地圖導航

回到指定位置

想要地图回到指定的位置也非常简单,只需要使用 uni.createMapContext() 方法创建一个 mapContent 对象 在使用 附带的 moveToLocatio 方法便可让地图回到指定的位置。

// 回到定位点
goBackToLocation() {
   uni.createMapContext("map").moveToLocation({34.7486, 113.6709});
},

利用uniapp開發一個簡單的地圖導航

导航弹框

图二中的地图应用选择弹框则是使用了 h5Plus

nativeUI.actionSheet 方法  创建了弹框

runtime.openURL 方法 打开了 导航软件 或 h5 页面导航

nativeUI情请查看

https://www.html5plus.org/doc/zh_cn/nativeui.html

runtime情请查看

https://www.html5plus.org/doc/zh_cn/runtime.html

    // 导航 会打开导航菜单供用户选择
    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`

推荐:《uniapp教程

以上是利用uniapp開發一個簡單的地圖導航的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:掘金社区。如有侵權,請聯絡admin@php.cn刪除

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版