平臺差異請查看
https://uniapp.dcloud.io/component/map.html#app平臺地圖服務(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ù)字類型
這就是放大縮小功能的依賴
回到指定位置
想要地圖回到指定的位置也非常簡單，只需要使用 uni.createMapContext() 方法創(chuàng)建一個(gè) mapContent 對象 在使用 附帶的 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 頁面導(dǎo)航
nativeUI情請查看
https://www.html5plus.org/doc/zh_cn/nativeui.html
runtime情請查看
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 用來為用戶未安裝導(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)=>{ // 失敗回到
// 如果失敗則說明未安裝 直接 打開網(wǎng)頁版進(jìn)行導(dǎo)航
// 畢竟用戶可能沒有安裝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 を使用してシンプルなマップ ナビゲーションを開発するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。
このウェブサイトの聲明
この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當(dāng)する法的責(zé)任を負(fù)いません。盜作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡(luò)ください。
uni-app vue3 インターフェイスリクエストをカプセル化する方法
May 11, 2023 pm 07:28 PM
uni-app インターフェイス、グローバル メソッドのカプセル化 1. ルート ディレクトリに API ファイルを作成し、API フォルダーに api.js、baseUrl.js、および http.js ファイルを作成します。 2.baseUrl.js ファイル コード exportdefault"https://XXXX .test03.qcw800.com/api/"3.http.js ファイル コードexportfunctionhttps(opts,data){lethttpDefaultOpts={url:opts.url,data:data,method:opts.method
uniapp が複數(shù)選択ボックスの全選択機(jī)能を?qū)g裝する方法を説明する例
Jun 22, 2022 am 11:57 AM
この記事では、uniapp に関する関連知識を提供します。主に、複數(shù)選択ボックスの全選択機(jī)能の実裝に関する問題を整理します。全選択機(jī)能が実裝できない理由は、チェックボックスのチェックされたフィールドがオンになっている場合です。動(dòng)的に変更されると、インターフェイス上のステータスはリアルタイムに変更されますが、checkbox-group の変更イベントはトリガーされません。
See all articles
