怎麼利用uniapp開發一個簡單的地圖導航?本篇文章就來提供大家一個製作簡單地圖的思路,希望對大家有幫助!
先來看看效果圖
簡易map
在圖一的地圖中可以看到a點連接到b點, 基本資訊以及基本的控制項(放大、縮小、回到某個指定的點),接下來我們分開逐步講解。
所需設定
需要先在manifest.json
中的app模組
中配置地圖,並加入相關地圖的key
,如果沒有可在相關開發者平台進行申請
配置好這部分就可以開始使用map元件了
地圖標記點
在uniapp map中想建立標記點就需要使用到一個屬性markers
。
我們先來看看markers
的常用屬性
#說明 | #型別 | 必填 | |
---|---|---|---|
id | 標記點id | number | # true |
latitude | 緯度 | number | true |
經度 | number | true | |
已顯示的圖示 | string | false | |
自訂標記點上方的氣泡框 | Object | false | |
為標記點傍邊增加標籤 | Object | false |
markershttps://uniapp.dcloud.io/component/map.html
了解這些我們就可以使用
屬性創建標記點了, markers
屬性是數組類型的,所以應該這樣創建標記點<pre class='brush:php;toolbar:false;'> this.covers = [
{
id: 1,
latitude: 34.7486,
longitude: 113.6709,
iconPath: &#39;../../static/shop.png&#39;,
title: "目的地"
}
];</pre>
如果想添加更多的標記點就可以繼續在數組中添加
,每個
都代表了一個標記點
<pre class='brush:php;toolbar:false;'> <map :markers="covers"></map></pre>
座標連線想讓我們的座標連線就需要使用到
polyline 屬性。 我們先來看看
的常用屬性
#說明 | #類型 | 必填 | |
---|---|---|---|
經緯度數組 | Array | true | |
線的顏色 | string | false | |
線寬 | Number | false | |
顯示的圖示 | ##stringfalse | arrowLine | |
Boolean | false | #colorList | |
Array | false |
平台差异请查看
https://uniapp.dcloud.io/component/map.html#app平台地图服务商差异
这里我们要注意 两个坑,作者亲踩
-
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
方法便可让地图回到指定的位置。
// 回到定位点 goBackToLocation() { uni.createMapContext("map").moveToLocation({34.7486, 113.6709}); },
导航弹框
图二中的地图应用选择弹框则是使用了 h5Plus
的
nativeUI.actionSheet
方法 创建了弹框
runtime.openURL
方法 打开了 导航软件 或 h5 页面导航
nativeUI情请查看
https://www.html5plus.org/doc/zh_cn/nativeui.html
runtime情请查看
https://www.html5plus.org/doc/zh_cn/runtime.html
// 导航 会打开导航菜单供用户选择 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`
推荐:《uniapp教程》
以上是利用uniapp開發一個簡單的地圖導航的詳細內容。更多資訊請關注PHP中文網其他相關文章!

VSCode中如何开发uni-app?下面本篇文章给大家分享一下VSCode中开发uni-app的教程,这可能是最好、最详细的教程了。快来看看!

如何利用uniapp开发一个贪吃蛇小游戏?下面本篇文章就手把手带大家在uniapp中实现贪吃蛇小游戏,希望对大家有所帮助!

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

本篇文章手把手带大家开发一个uni-app日历插件,介绍下一款日历插件是如何从开发到发布的,希望对大家有所帮助!

本篇文章给大家带来了关于uniapp的相关知识,其中主要整理了实现多选框的全选功能的相关问题,无法实现全选的原因是动态修改checkbox的checked字段时,界面上的状态能够实时变化,但是无法触发checkbox-group的change事件,下面一起来看一下,希望对大家有帮助。

uniapp怎么实现scroll-view下拉加载?下面本篇文章聊聊uniapp微信小程序scroll-view的下拉加载,希望对大家有所帮助!

本篇文章给大家带来了关于uniapp的相关知识,其中主要介绍了怎么用uniapp实现拨打电话并且还能同步录音的功能,感兴趣的朋友一起来看一下吧,希望对大家有帮助。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

Atom編輯器mac版下載
最受歡迎的的開源編輯器

Dreamweaver Mac版
視覺化網頁開發工具

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),