移动端开启第三方导航

王慕寒

于 2023-02-14 12:47:34 发布

阅读量107

点赞数

分类专栏：地图-前端文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/m0_51290484/article/details/129024795

版权

地图-前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该代码段展示了如何根据不同操作系统(Android或iOS)和地图应用(Tencent,Baidu,高德)来构建和打开相应的地图标注URL。通过用户选择，程序会调用设备上的地图应用，并传入经纬度和标注名称来定位。

摘要由CSDN通过智能技术生成

// 方法要传入需要标注地点的纬度latitude，经度longitude，名字name
            toMapAPP(latitude, longitude, name) {
                let url = "";
                if (plus.os.name == "Android") { //判断是安卓端
                    plus.nativeUI.actionSheet({ //选择菜单
                        title: "选择地图应用",
                        cancel: "取消",
                        buttons: [{
                            title: "腾讯地图"
                        }, {
                            title: "百度地图"
                        }, {
                            title: "高德地图"
                        }]
                    }, function(e) {
                        switch (e.index) {
                            //下面是拼接url,不同系统以及不同地图都有不同的拼接字段
                            case 1:
                                //注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
                                url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
                                break;
                            case 2:
                                url =
                                    `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
                                break;
                            case 3:
                                url =
                                    `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
                                break;
                            default:
                                break;
                        }
                        if (url != "") {
                            url = encodeURI(url);
                            //plus.runtime.openURL(url,function(e){})调起手机APP应用
                            plus.runtime.openURL(url, function(e) {
                                plus.nativeUI.alert("本机未安装指定的地图应用");
                            });
                        }
                    })
                } else {
                    // iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
                    // 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
                    //（如urlschemewhitelist:["iosamap","baidumap"]）  
                    plus.nativeUI.actionSheet({
                        title: "选择地图应用",
                        cancel: "取消",
                        buttons: [{
                            title: "腾讯地图"
                        }, {
                            title: "百度地图"
                        }, {
                            title: "高德地图"
                        }]
                    }, function(e) {
                        switch (e.index) {
                            case 1:
                                url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
                                break;
                            case 2:
                                url =
                                    `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
                                break;
                            case 3:
                                url =
                                    `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
                                break;
                            default:
                                break;
                        }
                        if (url != "") {
                            url = encodeURI(url);
                            plus.runtime.openURL(url, function(e) {
                                plus.nativeUI.alert("本机未安装指定的地图应用");
                            });
                        }
                    })
                }
            }