uni-app支持多端第三方地圖定位的方法

    簡介

    該方法支持跳轉(zhuǎn)第三方地圖并定位指定坐標(biāo)。愛掏網(wǎng) - it200.com

    APP端跳轉(zhuǎn)至百度地圖(第三方軟件);若無,則跳轉(zhuǎn)至高德地圖(第三方軟件);若均無,則打開騰訊地圖(uni自帶方法:uni.openLocation)
    其它端打開騰訊地圖(uni自帶方法:uni.openLocation)

    demo

    源碼:https://github.com/yapeee/uni-components

    測試數(shù)據(jù):

    wgs84: 39.9078008469, 116.391290596
    bd09: 39.915547, 116.403909
    gcj02: 39.9091591069, 116.3974783161

    基礎(chǔ)用法

    import Map from '../ms-openMap.js'
    Map.openMap(latitude, longitude, name, coord_type)
    

    屬性說明

    參數(shù) 說明 類型
    latitude 緯度(默認(rèn)GCJ-02坐標(biāo)系) Float
    longitude 經(jīng)度(默認(rèn)GCJ-02坐標(biāo)系) Float
    name 地圖標(biāo)注名稱 String
    coord_type 坐標(biāo)類型,可選參數(shù)。愛掏網(wǎng) - it200.com示例:gcj02、bd09、wgs84 String

    實現(xiàn)方案

    首先判斷程序的運行平臺,不同的平臺調(diào)用不同的打開地圖的方法。愛掏網(wǎng) - it200.comandroid和ios平臺下,判斷并打開百度地圖和高德地圖。愛掏網(wǎng) - it200.com其他平臺下,打開騰訊地圖網(wǎng)頁版(uni自帶方法)。愛掏網(wǎng) - it200.com

    一、判斷運行平臺

    通過條件編譯及uni.getSystemInfoSync().platform來判斷android、ios及其他平臺。愛掏網(wǎng) - it200.com

    // #ifdef APP-PLUS
    switch(uni.getSystemInfoSync().platform){
      case 'android':
        console.log('運行Android上')
        openMapByAndroid(latitude, longitude, name)
        break;
      case 'ios':
        console.log('運行iOS上')
        openMapByIos(latitude, longitude, name)
        break;
      default:
        openMapByDefault(latitude, longitude, name)
        console.log('運行在開發(fā)者工具上')  
        break;
    }  
    // #endif
    // #ifndef APP-PLUS
    openMapByDefault(latitude, longitude, name)
    // #endif
    tips:
    
    

    平臺判斷有2種場景,一種是在編譯期判斷,一種是在運行期判斷。愛掏網(wǎng) - it200.com

    編譯期判斷:即條件編譯,不同平臺在編譯出包后已經(jīng)是不同的代碼。愛掏網(wǎng) - it200.com

    運行期判斷:運行期判斷是指代碼已經(jīng)打入包中,仍然需要在運行期判斷平臺,此時可使用 uni.getSystemInfoSync().platform 判斷客戶端環(huán)境是 Android、iOS 還是小程序開發(fā)工具(在百度小程序開發(fā)工具、微信小程序開發(fā)工具、支付寶小程序開發(fā)工具中使用 uni.getSystemInfoSync().platform 返回值均為 devtools)。愛掏網(wǎng) - it200.com

    二、APP打開第三方地圖的方法

    HTML5+是對接SDK與頁面的中間件,用于頁面通過js調(diào)用底層的SDK接口。愛掏網(wǎng) - it200.com

    2.1、 APP判斷第三方應(yīng)用是否存在

    /*
     * appInf: ( ApplicationInf ) 必選 要判斷第三方程序的描述信息
     * Android平臺需要通過設(shè)置appInf的pname屬性(包名)進(jìn)行查詢。愛掏網(wǎng) - it200.com 
     * iOS平臺需要通過設(shè)置appInf的action屬性(Scheme)進(jìn)行查詢,在iOS9以后需要添加白名單才可查詢,
     * 在manifest.json文件plus->distribute->apple->urlschemewhitelist節(jié)點下添加(如urlschemewhitelist:["weixin"]).
     */
    plus.runtime.isApplicationExist(appInf);
    

    2.1.1、判斷百度地圖應(yīng)用是否存在

    plus.runtime.isApplicationExist({pname: 'com.baidu.BaiduMap', action: 'baidumap://'})

    2.1.2、判斷高德地圖應(yīng)用是否存在

    plus.runtime.isApplicationExist({pname: 'com.autonavi.minimap'},action: 'iosamap://'})

    2.2、APP調(diào)用第三方程序打開指定的URL

    /*
     * 說明:調(diào)用第三方程序打開指定的URL
     * 參數(shù):
     * url: ( String ) 必選 要打開的URL地址
     * errorCB: ( OpenErrorCallback ) 可選 打開URL地址失敗的回調(diào)
     * identity: ( String ) 可選 指定打開URL地址的程序名稱
     */
    plus.runtime.openURL( url, errorCB, identity );
    

    2.2.1、打開第三方程序?qū)嶋H應(yīng)用

    function openURL(url, identity ) {
      let newurl = encodeURI(url);
      plus.runtime.openURL( newurl, function(res){
        uni.showModal({
          content: res.message
        })
      }, identity);
    }
    

    2.2.2、打開android百度地圖

    url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`
    identity = 'com.baidu.BaiduMap'
    openURL(url, identity)
    

    2.2.3、打開android高德地圖

    url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
    identity = 'com.autonavi.minimap'
    openURL(url, identity)
    

    2.2.4、打開ios百度地圖

    url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&cOntent=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
    openURL(url, identity)
    

    2.2.5、打開ios高德地圖

    url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
    openURL(url, identity)
    

    三、其他平臺打開地圖的方法

    其他平臺采用uni.openLocation(OBJECT)方法使用應(yīng)用內(nèi)置地圖查看位置。愛掏網(wǎng) - it200.com

    uni.openLocation({
      latitude: latitude,
      longitude: longitude,
      name: name,
      fail: () => {
        uni.showModal({
          content: '打開地圖失敗,請重'
        })
      },
    })
    

    更新日志

    2024-01-02

    支持BD-09(百度坐標(biāo))、GCJ-02(高德、騰訊)、WGS-84(GPS坐標(biāo))坐標(biāo)系。愛掏網(wǎng) - it200.com

    2024.12.10

    第一次發(fā)布,支持跳轉(zhuǎn)第三方地圖并定位指定坐標(biāo)。愛掏網(wǎng) - it200.com

    參考

    百度地圖URI API
    高德地圖URI API
    uni-app HTML5+ API

    以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持。愛掏網(wǎng) - it200.com


    聲明:所有內(nèi)容來自互聯(lián)網(wǎng)搜索結(jié)果,不保證100%準(zhǔn)確性,僅供參考。如若本站內(nèi)容侵犯了原著者的合法權(quán)益,可聯(lián)系我們進(jìn)行處理。
    發(fā)表評論
    更多 網(wǎng)友評論0 條評論)
    暫無評論

    返回頂部

    主站蜘蛛池模板: 在线精品动漫一区二区无广告| 亚欧成人中文字幕一区| 免费无码毛片一区二区APP| 国产一区二区三区在线免费观看| av无码人妻一区二区三区牛牛 | 91视频国产一区| 国产成人无码AV一区二区| 色噜噜一区二区三区| 国产精品视频无圣光一区| 亚洲国产精品无码第一区二区三区| 国产一区二区免费| 亚洲乱码国产一区网址| 97久久精品午夜一区二区| 波多野结衣一区二区三区高清在线| 糖心vlog精品一区二区三区| 奇米精品视频一区二区三区| 亚洲AV无一区二区三区久久| 国产精华液一区二区区别大吗 | 亚洲AV噜噜一区二区三区| 日韩亚洲AV无码一区二区不卡| 久久免费精品一区二区| 国产人妖视频一区二区| 久久精品一区二区国产| 国产精品视频一区二区三区四| 国产一区二区三区免费在线观看| 欧洲精品免费一区二区三区| 日韩一区二区a片免费观看| 精品福利一区二区三区免费视频| 国产精品一区二区久久精品| 色狠狠色狠狠综合一区| 韩国精品一区视频在线播放| 国产精品一区二区电影| 无码av不卡一区二区三区| 丝袜人妻一区二区三区网站| 国产一区二区三区在线观看精品| 中文字幕Av一区乱码| 中文字幕一区二区三区久久网站| 国产福利一区二区三区| 亚洲熟女综合一区二区三区| 麻豆视传媒一区二区三区| 精品人妻少妇一区二区三区在线|