這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 先上效果 簡易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 |
這裡我們要註意 兩個坑，作者親踩
-
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，數字類型
這就是放大縮小功能的依賴
回到指定位置
想要地圖回到指定的位置也非常簡單，只需要使用 uni.createMapContext() 方法創建一個 mapContent 對象 在使用 附帶的 moveToLocatio 方法便可讓地圖回到指定的位置。
導航彈框
圖二中的地圖應用選擇彈框則是使用了 h5Plus 的
nativeUI.actionSheet 方法 創建了彈框
runtime.openURL 方法 打開了 導航軟體 或 h5 頁面導航
// 導航 會打開導航菜單供用戶選擇
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
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
