uniapp? ???? ??? ?? ?????? ???? ??? ?????? ? ??? ??? ??? ??? ? ??? ??? ????.

?? ???? ???????

??? ??

?? 1? ??? ?? a??? b??? ???? ?? ?? ? ? ???, ????? ???? ???(??, ??, ??? ???? ????)? ???? ???? ??? ???????.

?? ??

?? manifest.json? ? ???? ??? ???? ?? ???? ???. ?? ???>? ??? ?? ??? ????? ????? ???<code>manifest.json中的 app模塊中配置地圖，并添加相關(guān)地圖的key，如果沒有可在相關(guān)開發(fā)者平臺進行申請

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

地圖標記點

在uniapp map中想創(chuàng)建標記點就需要使用到一個屬性 markers。

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

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

查看更多請查看：

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

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

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

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

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

掛載

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

坐標連線

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

我們先來看一下polyline

? ??? ??? ? ?? ?? ??? ??? ? ?????? ??namedescriptiontyperequiredidmarker id?? ??? ??? ???stringfalse ??? ?? ??? ?? ?? ??? ??? ?????Objectfalselabel?? ???? ??? ?????Objectfalse

??? ??: mount

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

	?? ?? ???		??? ??? ?? ???? ?????, markers ??? ?????? ???.
			? ?? ??? ???????.
https://uniapp.dcloud.io/comComponent/map.html	? ?? ??? ? markers ??? ?????? ?? ???, markers</? ??? ? ????. code> ??? ?? ????? ?? ???? ??? ?? ????? ???</td><pre class='brush:php;toolbar:false;'> // 連線 this.polyline = [ // 第一條線 { // 每個點的經(jīng)緯度 points: [{34.7486, 113.6709}, {28.7486, 113.6709}], // 顏色 color: &quot;#000&quot;, // 寬度 width: 10 } ]</pre><td>? ?? ?? ???? ????? ???? ??? <code>??? ???? ???.	? < code>??? ? ? ??? ??? ?????

?????? ????????????? ????? ????<? ???? ???. /?? > ??. ?????? <code>??????????????Name????Description????Type????Required????????????points??????? ???? ?? ?????? true????????color????? ??????string????false????????width????line width????Number????false????????iconPath ?? ????? ???????string????false?? ?? ????arrowLine???????? ?? ?????Boolean????false????????colorList????Rainbow display????Array????false????????

平臺差異請查看

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

這里我們要注意 兩個坑，作者親踩

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

  polyline 之所以是一個數(shù)組是因為他可以同時創(chuàng)建多條線并且連線，每條線還可以有著不同的顏色、箭頭、圖標等。

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

  points之所以是一個數(shù)組是因為他要確定某一條線上的每一個點，且每個點都應(yīng)該由經(jīng)緯度構(gòu)成

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

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

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

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

放大縮小

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

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

回到指定位置

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

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

導(dǎo)航彈框

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

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

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

nativeUI情請查看

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

runtime情請查看

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

    // 導(dǎo)航 會打開導(dǎo)航菜單供用戶選擇
    openNavigation(longitude, latitude, name) {
        let url = ""; // app url
        let webUrl = ""; // web url 用來為用戶未安裝導(dǎo)航軟件時打開瀏覽器所使用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)=>{ // 失敗回到
                    // 如果失敗則說明未安裝 直接 打開網(wǎng)頁版進行導(dǎo)航
                    // 畢竟用戶可能沒有安裝app但一定安裝的有瀏覽器
                    plus.runtime.openURL(webUrl);
                });
            }
    })
}

這就是我導(dǎo)航彈窗實現(xiàn)的邏輯了, 這里我僅僅只是用了高德地圖的選項，大家可以根據(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? ???? ??? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!