首頁 > web前端 > uni-app > 主體

利用uniapp開發一個簡單的地圖導航

青灯夜游
發布: 2022-06-09 19:46:41
轉載
7218 人瀏覽過

怎麼利用uniapp開發一個簡單的地圖導航?本篇文章就來提供大家一個製作簡單地圖的思路,希望對大家有幫助!

利用uniapp開發一個簡單的地圖導航

先來看看效果圖

利用uniapp開發一個簡單的地圖導航

利用uniapp開發一個簡單的地圖導航

簡易map

在圖一的地圖中可以看到a點連接到b點, 基本資訊以及基本的控制項(放大、縮小、回到某個指定的點),接下來我們分開逐步講解。

所需設定

需要先在manifest.json中的app模組中配置地圖,並加入相關地圖的key,如果沒有可在相關開發者平台進行申請

利用uniapp開發一個簡單的地圖導航

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

地圖標記點

在uniapp map中想建立標記點就需要使用到一個屬性markers

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

##longitude經度numbertrueiconPath已顯示的圖示stringfalsecallout自訂標記點上方的氣泡框Objectfalse#label為標記點傍邊增加標籤Objectfalse
#說明 #型別 必填
id 標記點id number # true
latitude 緯度 number true
##看更多請看:

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

了解這些我們就可以使用
markers

屬性創建標記點了, markers屬性是數組類型的,所以應該這樣創建標記點<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> this.covers = [ { id: 1, latitude: 34.7486, longitude: 113.6709, iconPath: &amp;#39;../../static/shop.png&amp;#39;, title: &quot;目的地&quot; } ];</pre><div class="contentsignin">登入後複製</div></div>如果想添加更多的標記點就可以繼續在數組中添加

object

每個

object

都代表了一個標記點

掛載

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> &lt;map :markers=&quot;covers&quot;&gt;&lt;/map&gt;</pre><div class="contentsignin">登入後複製</div></div>

座標連線想讓我們的座標連線就需要使用到

polyline

屬性。 我們先來看看

polyline

的常用屬性

pointscolorwidth#iconPath##string falsearrowLine帶箭頭的線Booleanfalse#colorList彩虹顯Arrayfalse
#說明#類型必填
經緯度數組Arraytrue
線的顏色stringfalse
線寬Numberfalse
顯示的圖示
#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,数字类型

这就是放大缩小功能的依赖

利用uniapp開發一個簡單的地圖導航

回到指定位置

想要地图回到指定的位置也非常简单,只需要使用 uni.createMapContext() 方法创建一个 mapContent 对象 在使用 附带的 moveToLocatio 方法便可让地图回到指定的位置。

// 回到定位点
goBackToLocation() {
   uni.createMapContext("map").moveToLocation({34.7486, 113.6709});
},
登入後複製

利用uniapp開發一個簡單的地圖導航

导航弹框

图二中的地图应用选择弹框则是使用了 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中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!