完整拉起高德地图的代码。自动导航至目的地

直接上代码,反正只让我自己看,调用方法如下

如有理解需要,可看我另一篇文章:HTML5唤起高德地图APP示例

dingWei(目的地地址)
<!-- 高德地图安全密钥,必须在JSAPI脚本加载之前进行设置,否则设置无效。 -->
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'bf6265ecbc9e4ebff9c297369b9b106d',
        }
    </script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=f016c324446cdc91ea3297560d1d5925&plugin=AMap.Geolocation" type="text/javascript"></script>
function dingWei(address) {
    // 禁止冒泡
    window.event.cancelBubble = true;
    // 加载中弹窗
    loading()
    // 获取目的地经纬度
    let data = {
        key: '8a8680f525cc8c751d4528eeddba06f4',
        address: address
    };
    $.ajax({
        url: 'https://restapi.amap.com/v3/geocode/geo',
        type: 'get',
        dataType: 'jsonp',
        data,
        success: function (data) {
            //console.log(data.geocodes[0].location)//获取到的经纬度
            // console.log(data)
            const locationUrl = data.geocodes[0].location;
            // console.log(locationUrl.split(",")[0])
            openAMap(locationUrl.split(",")[0] , locationUrl.split(",")[1], address)
        }
    })
}
//加载
function loading() {
    var load = layer.open({
        type: 2
        , shadeClose: false
        , content: '加载中'
    });
    return load;
}
//根据手机系统获取scheme
function getScheme(){
    let agent = navigator.userAgent.toLowerCase();
    if(agent.indexOf("iphone") != -1 || agent.indexOf("ipad") != -1){
        return "iosamap://path";
    }else{
        return "amapuri://route/plan";
    }
}
//唤起高德地图APP(注意url需要plugin参数)
function openAMap(lng, lat, address) {
    let geolocation = new AMap.Geolocation();
    geolocation.getCurrentPosition(function(status,result){
        layer.closeAll()
        if(status=="complete"){
            let app_url = `${getScheme()}?sourceApplication=com.mzwu.www&slat=${result.position.lat}&slon=${result.position.lng}&sname=我的位置&dlat=${lat}&dlon=${lng}&dname=${address}&dev=0&t=0`;
            let web_url = `https://uri.amap.com/navigation?from=${result.position.lng},${result.position.lat},我的位置&to=${lng},${lat},${address}&mode=car&policy=1&src=com.mzwu.www&callnative=0`;

            //尝试唤起高德地图App
            window.location.href = app_url;

            //唤起失败打开Web高德地图
            var startTime = Date.now();
            var count = 0;

            var t = setInterval(function () {
                if (++count < 30) {
                    return;
                }
                if (Date.now() - startTime > 800) {
                    clearInterval(t);
                }
                if (!(document.hidden || document.webkitHidden)) {
                    window.location.href = web_url;
                }
            }, 20);

            window.onblur = function () {
                clearInterval(t);
            };
        }else{
            alert("获取不到定位,请检查手机设置!");
        }
    });
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值