怎么利用uniapp開發(fā)一個(gè)簡(jiǎn)單的地圖導(dǎo)航？本篇文章就來(lái)為大家提供一個(gè)制作簡(jiǎn)單地圖的思路，希望對(duì)大家有所幫助！

先來(lái)看一眼效果圖

簡(jiǎn)易map

在圖一的地圖中可以看到 a點(diǎn) 連接 到 b點(diǎn), 基本信息 以及 基本的控件(放大、縮小、回到某個(gè)指定的點(diǎn))，接下來(lái)我們分開逐步講解。

所需配置

需要先在manifest.json中的 app模塊中配置地圖，并添加相關(guān)地圖的key，如果沒(méi)有可在相關(guān)開發(fā)者平臺(tái)進(jìn)行申請(qǐng)

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

地圖標(biāo)記點(diǎn)

在uniapp map中想創(chuàng)建標(biāo)記點(diǎn)就需要使用到一個(gè)屬性 markers。

我們先來(lái)看一下markers的常用屬性

查看更多請(qǐng)查看：

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

了解過(guò)這些我們就可以使用markers屬性創(chuàng)建標(biāo)記點(diǎn)了, markers屬性是數(shù)組類型的，所以應(yīng)該這樣創(chuàng)建標(biāo)記點(diǎn)

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

如果想添加更多的標(biāo)記點(diǎn)就可以繼續(xù)在數(shù)組中添加object，

每個(gè)object都代表了一個(gè)標(biāo)記點(diǎn)

掛載

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

坐標(biāo)連線

想讓我們的坐標(biāo)連線就需要使用到 polyline 屬性。

我們先來(lái)看一下polyline的常用屬性

平臺(tái)差異請(qǐng)查看

https://uniapp.dcloud.io/component/map.html#app平臺(tái)地圖服務(wù)商差異

這里我們要注意 兩個(gè)坑，作者親踩

• polyline 屬性是一個(gè)數(shù)組

  polyline 之所以是一個(gè)數(shù)組是因?yàn)樗梢酝瑫r(shí)創(chuàng)建多條線并且連線，每條線還可以有著不同的顏色、箭頭、圖標(biāo)等。

• points 也是一個(gè)數(shù)組

  points之所以是一個(gè)數(shù)組是因?yàn)樗_定某一條線上的每一個(gè)點(diǎn)，且每個(gè)點(diǎn)都應(yīng)該由經(jīng)緯度構(gòu)成

所以 polyline 的正確寫法應(yīng)該是這樣的

    // 連線
    this.polyline = [
        // 第一條線
        {
            // 每個(gè)點(diǎn)的經(jīng)緯度
            points: [{34.7486, 113.6709}, {28.7486, 113.6709}],
            // 顏色
            color: "#000",
            // 寬度
            width: 10
        }
    ]

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

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

放大縮小

map 的放大縮依賴于 scale 屬性 所以只需要?jiǎng)討B(tài)改變 scale 屬性的值就可以了。 但這里要注意 scale 的取值范圍為 3~20，數(shù)字類型

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

回到指定位置

想要地圖回到指定的位置也非常簡(jiǎn)單，只需要使用 uni.createMapContext() 方法創(chuàng)建一個(gè) mapContent 對(duì)象 在使用 附帶的 moveToLocatio 方法便可讓地圖回到指定的位置。

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

導(dǎo)航彈框

圖二中的地圖應(yīng)用選擇彈框則是使用了 h5Plus 的

nativeUI.actionSheet 方法 創(chuàng)建了彈框

runtime.openURL 方法 打開了 導(dǎo)航軟件 或 h5 頁(yè)面導(dǎo)航

nativeUI情請(qǐng)查看

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

runtime情請(qǐng)查看

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

    // 導(dǎo)航 會(huì)打開導(dǎo)航菜單供用戶選擇
    openNavigation(longitude, latitude, name) {
        let url = ""; // app url
        let webUrl = ""; // web url 用來(lái)為用戶未安裝導(dǎo)航軟件時(shí)打開瀏覽器所使用url
        plus.nativeUI.actionSheet({ //選擇菜單
            title: "選擇地圖應(yīng)用",
            cancel: "取消",
            buttons: [{title: "高德地圖"}] // 可選的地圖類型
        }, (e)=> {
                // 判斷用戶選擇的地圖
            switch (e.index) {
                //下面是拼接url,不同系統(tǒng)以及不同地圖都有不同的拼接字段
                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 導(dǎo)航 
                plus.runtime.openURL(url, (err)=>{ // 失敗回到
                    // 如果失敗則說(shuō)明未安裝 直接 打開網(wǎng)頁(yè)版進(jìn)行導(dǎo)航
                    // 畢竟用戶可能沒(méi)有安裝app但一定安裝的有瀏覽器
                    plus.runtime.openURL(webUrl);
                });
            }
    })
}

這就是我導(dǎo)航彈窗實(shí)現(xiàn)的邏輯了, 這里我僅僅只是用了高德地圖的選項(xiàng)，大家可以根據(jù)需要增加相應(yīng)地圖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:經(jīng)度,緯度;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開發(fā)一個(gè)簡(jiǎn)單的地圖導(dǎo)航的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！