Bagaimana untuk menggunakan uniapp untuk membangunkan navigasi peta yang mudah? Artikel ini akan memberi anda idea untuk membuat peta mudah saya harap ia akan membantu anda!

Mari kita lihat rendering dahulu

Peta mudah

Dalam peta dalam Rajah 1, anda boleh melihat bahawa titik a disambungkan ke titik b, maklumat asas dan kawalan asas (zum masuk, zum keluar, kembali ke titik yang ditentukan Seterusnya). , kami akan meneruskan langkah demi langkah menerangkan.

Konfigurasi yang diperlukan

Anda perlu mengkonfigurasi peta dalam manifest.json dalam app模塊 dahulu, dan tambahkan key daripada peta berkaitan , jika tidak, anda boleh memohon pada platform pembangun yang berkaitan

Selepas mengkonfigurasi bahagian ini, anda boleh mula menggunakan komponen peta

Titik Penanda Peta

Untuk mencipta titik penanda dalam peta uniapp, anda perlu menggunakan atribut markers.

Mari kita lihat dulu atribut biasa markers

Untuk maklumat lanjut, sila semak:

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

Selepas memahami perkara ini, kita boleh menggunakan atribut markers untuk mencipta titik penanda Atribut markers ialah jenis tatasusunan, jadi titik penanda sepatutnya dicipta seperti ini

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

Jika anda ingin menambah lebih banyak mata penanda, anda boleh terus menambah object dalam tatasusunan,

setiap object mewakili titik penanda

掛載

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

Sambungan koordinat

Jika kita ingin menyambungkan koordinat kita, kita perlu menggunakan polyline atribut.

Mari kita lihat sifat biasa 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 的正確寫(xiě)法應(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 的放大縮依賴(lài)于 scale 屬性 所以只需要?jiǎng)討B(tài)改變 scale 屬性的值就可以了。 但這里要注意 scale 的取值范圍為 3~20，數(shù)字類(lèi)型

這就是放大縮小功能的依賴(lài)

回到指定位置

想要地圖回到指定的位置也非常簡(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 方法 打開(kāi)了 導(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ì)打開(kāi)導(dǎo)航菜單供用戶(hù)選擇
    openNavigation(longitude, latitude, name) {
        let url = ""; // app url
        let webUrl = ""; // web url 用來(lái)為用戶(hù)未安裝導(dǎo)航軟件時(shí)打開(kāi)瀏覽器所使用url
        plus.nativeUI.actionSheet({ //選擇菜單
            title: "選擇地圖應(yīng)用",
            cancel: "取消",
            buttons: [{title: "高德地圖"}] // 可選的地圖類(lèi)型
        }, (e)=> {
                // 判斷用戶(hù)選擇的地圖
            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);
                // 打開(kāi) app 導(dǎo)航 
                plus.runtime.openURL(url, (err)=>{ // 失敗回到
                    // 如果失敗則說(shuō)明未安裝 直接 打開(kāi)網(wǎng)頁(yè)版進(jìn)行導(dǎo)航
                    // 畢竟用戶(hù)可能沒(méi)有安裝app但一定安裝的有瀏覽器
                    plus.runtime.openURL(webUrl);
                });
            }
    })
}

這就是我導(dǎo)航彈窗實(shí)現(xiàn)的邏輯了, 這里我僅僅只是用了高德地圖的選項(xiàng)，大家可以根據(jù)需要增加相應(yīng)地圖app，其他常見(jiàn)的我放在下方了。

騰訊

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:名稱(chēng);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教程》

Atas ialah kandungan terperinci Gunakan uniapp untuk membangunkan navigasi peta yang mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!