Javascript——外部调用(腾讯、百度、高德)地图导航,自动判断是web端还是手机端,最全接口合集!!!

本文介绍了一个HTML页面,展示了如何使用JavaScript获取用户位置并调用腾讯、百度和高德地图的API进行路径规划,包括当前位置和目的地的坐标处理以及不同地图服务的URI链接生成。
摘要由CSDN通过智能技术生成
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图</title>
</head>
<body>
    <div>
        当前位置:<text id="myad"></text><br />
        <text>目的地:成都天府广场</text><br />
        <label for="map-select">选择导航</label>
        <select name="map" id="map-select" onchange="check()">
            <option value="tx">腾讯地图</option>
            <option value="bd">百度地图</option>
            <option value="gd">高德地图</option>
        </select>
    </div>
    <script>
        var myad = document.getElementById('myad');
        var flongitude = ''
        var flatitude = ''
        myad.innerHTML = "未知"

        // 目的地
        var tlongitude = 104.065837
        var tlatitude = 30.657349
        var name = '成都天府广场'
        getLocation().then(res => {
            // 当前位置
            flongitude = res[0]
            flatitude = res[1]
            myad.innerHTML = flongitude + ',' + flatitude
        }).catch(err => {
            console.log(err)
        })
        function check() {
            var map = document.getElementById('map-select').value;
            goMap(map)
        }
        function goMap(map) {
            console.log(flongitude + ',' + flatitude + ';' + tlongitude + ',' + tlatitude + ',' + name)

            var urlCollect = {};
            const TMAP_KEY = 'XXX';//自己到腾讯地图开发平台申请key,https://lbs.qq.com/dev/console/application/mine
            if (map == "tx") {//腾讯地图
                if (flongitude && flatitude) {
                    urlCollect.Android = `qqmap://map/routeplan?type=drive&from=我的位置&fromcoord=${flatitude},${flongitude}&to=${name}&tocoord=${tlatitude},${tlongitude}&referer=${TMAP_KEY}`;//安卓和IOS
                    urlCollect.H5 = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${flatitude},${flongitude}&to=${name}&tocoord=${tlatitude},${tlongitude}&policy=1&referer=${TMAP_KEY}`;
                } else {
                    urlCollect.Android = `qqmap://map/marker?marker=coord:${tlatitude},${tlongitude};title:${name};addr:${name}&referer=${TMAP_KEY}`;
                    urlCollect.H5 = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${tlatitude},${tlongitude};title:${name};addr:${name}&referer=${TMAP_KEY}`;
                }

            } else if (map == "bd") {//百度地图
                if (flongitude && flatitude) {
                    const uri = `direction?origin=${flatitude},${flongitude}|name:我的位置&destination=${tlatitude},${tlongitude}|name:${name}&mode=driving&region=${name}`;
                    urlCollect.H5 = `http://api.map.baidu.com/${uri}&output=html`
                    urlCollect.Android = `bdapp://map/${uri}&src=andr.baidu.openAPIdemo`;
                    urlCollect.IOS = `baidumap://map/${uri}&src=ios.baidu.openAPIdemo`;
                } else {
                    const uri = `marker?location=${tlatitude},${tlongitude}&title=${name}&content=${name}`;
                    urlCollect.H5 = `https://api.map.baidu.com/${uri}&output=html&src=webapp.baidu.openAPIdemo`;
                    urlCollect.Android = `bdapp://map/${uri}&src=andr.baidu.openAPIdemo`;
                    urlCollect.IOS = `baidumap://map/${uri}&src=ios.baidu.openAPIdemo`;
                }
            } else {//高德地图
                if (flongitude && flatitude) {
                    urlCollect.H5 = `https://uri.amap.com/navigation?from=${flongitude},${flatitude},我的位置&to=${tlongitude},${tlatitude},${name}&mode=driving&policy=1&src=mypage&coordinate=gaode&callnative=1`;
                    urlCollect.Android = `amapuri://route/plan/?sid=BGVIS1&slat=${flatitude}&slon=${flongitude}&sname=当前位置&did=BGVID1&dlat=${tlatitude}&dlon=${tlongitude}&dname=${name}&dev=0&t=0`
                    urlCollect.IOS = `iosamap://path?sourceApplication=applicationName&sid=BGVIS1&slat=${flatitude}&slon=${flongitude}&sname=当前位置&did=BGVID1&dlat=${tlatitude}&dlon=${tlongitude}&dname=${name}&dev=0&t=0`
                } else {
                    urlCollect.H5 = `https://uri.amap.com/marker?position=${tlongitude},${tlatitude}&name=${name}&src=mypage&coordinate=gaode&callnative=1`;
                    urlCollect.Android = `amapuri://route/plan/?sourceApplication=mhc&dlat=${tlatitude}&dlon=${tlongitude}&dname=${name}&dev=0&t=0`//导航
                    // urlCollect.Android = `androidamap://navi?sourceApplication=appname&poiname=${name}&lat=${tlatitude}&lon=${tlongitude}&dev=1&style=2`//驾车导航
                    urlCollect.IOS = `iosamap://path?sourceApplication=mhc&dlat=${tlatitude}&dlon=${tlongitude}&dname=${name}&dev=0&t=0`
                }

            }

            var url = ""
            if (typeof plus === "undefined") {
                url = urlCollect.H5;
                window.open(url, "_blank");
                return;
            } else if (plus.os.name == "Android") {
                url = urlCollect.Android;
            } else {
                url = map == "腾讯地图" ? urlCollect.Android : urlCollect.IOS;
            }

            if (url != "") {
                url = encodeURI(url);
                plus.runtime.openURL(url, function (e) {
                    if (e.code == 0) {
                        // 打开地图应用成功
                        console.log("成功打开地图应用");
                    } else {
                        // 打开地图应用失败,提示未安装应用
                        plus.nativeUI.alert("本机未安装指定的地图应用");
                    }
                });
            }
        }
        function getLocation() {
            return new Promise((resolve, reject) => {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition((position) => {
                        var cords = position.coords;
                        var longitude = cords.longitude; //获取经度
                        var latitude = cords.latitude; //获取纬度
                        console.log(longitude, latitude)
                        resolve([longitude, latitude])
                    }, (err) => {
                        msg = error(err)
                        reject(msg)
                    });
                } else {
                    alert("该浏览器不支持获取地理位置");
                }
            })
        }
        function error(error) {
            var err = error.code;
            var msg = "";
            switch (err) {
                case 1: msg = "用户拒绝了位置服务"; break;
                case 2: msg = "获取不到位置信息"; break;
                case 3: msg = "获取信息超时"; break;
                default: msg = "其他错误";
            }
            alert(msg);
            return msg;
        }
    </script>
</body>
</html>

参考:URI API(地图调起) | 腾讯位置服务 (qq.com)

路径规划-Android-开发指南-高德地图手机版|高德地图API (amap.com)​​​​​​​

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在web使用腾讯地图API获取用户地理位置,可以使用HTML5中的Geolocation API。以下是一些简单的步骤: 1. 注册腾讯地图开发者账号并创建应用程序,然后获取密钥。 2. 在HTML页面中嵌入JavaScript代码,使用Geolocation API请求用户位置: ```javascript if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { alert("Geolocation is not supported by this browser."); } function showPosition(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; // 调用腾讯地图API进行地理编码 } ``` 3. 在showPosition函数中,可以将用户的经纬度坐标传递给腾讯地图API进行地理编码,以获取用户位置的详细信息: ```javascript function showPosition(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; var url = "https://apis.map.qq.com/ws/geocoder/v1/?location=" + lat + "," + lng + "&key=YOUR_KEY"; fetch(url) .then(response => response.json()) .then(data => { console.log(data.result.formatted_addresses.recommend); // 显示用户位置信息 }); } ``` 在以上代码中,需要将YOUR_KEY替换为你在腾讯地图开发者账号中生成的API密钥。 4. 最后,可以将获取到的用户位置信息显示在页面上,以便用户查看。 需要注意的是,使用Geolocation API获取用户位置需要用户授权。在请求用户授权时,可以使用下面的代码: ```javascript navigator.permissions.query({name:'geolocation'}).then(function(result) { if (result.state === 'granted') { navigator.geolocation.getCurrentPosition(showPosition); } else if (result.state === 'prompt') { navigator.geolocation.getCurrentPosition(showPosition, showError); } else if (result.state === 'denied') { showError("User denied geolocation"); } }); ``` 在以上代码中,使用permissions.query()函数查询用户是否授权Geolocation API,并根据结果调用相应的函数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DytLisa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值