wab页面调用百度地图APP导航,IOS10不兼容问题解决方式

wab页面调用百度地图APP导航的时候,发现一个问题,就是安卓手机正常调起,但IOS10不兼容

解决方法是放弃html5浏览器获取经纬度,创建一个百度地图的地理定位对象,来获取百度地图中的经纬度。

<style>

#app{overflow: hidden;position:absolute;top:0rem;left:0rem;z-index:99999;width:7.5rem;display: none}
#daohang{display:block;padding:3px 5px;border-radius:3px;position:absolute;bottom:0.1rem;right:0.1rem;z-index:999;background:#fff;border:1px solid #336699;font-size:16px}
     #l-map{width:100%;}
        #r-result,#r-result table{width:100%;}
        .nav { width: 100%; height: 40px; line-height: 40px; background: #EDEDED; border: 1px solid #ADADAD;}
        .nav .nav-inner{ width: 30%; margin-left: 35%;}
        .nav .nav-sub { float: left; width: 33%;}
        .nav .nav-sub a { text-decoration: none; }
        .nav .nav-sub a i { display: inline-block; background: url("http://webmap1.map.bdstatic.com/wolfman/static/common/images/ui3/mo_banner_ba37b5d.png")}
        .nav .nav-sub a.bus i { background-position: -1px -192px; position: relative; top: 2px; width: 13px; height: 16px;}
        .nav .nav-sub a.driver i { background-position: -29px -194px; width: 15px; height: 14px;}
        .nav .nav-sub a.walk i { background-position: -102px -189px; width: 16px; height: 18px;}
        .nav .nav-sub a.bus.cur i { background-position: -15px -192px; }
        .nav .nav-sub a.driver.cur i { background-position: -45px -194px; }
        .nav .nav-sub a.walk.cur i { background-position: -120px -189px;}
        .hide { display: none;}
        input { font-family: "micrsoft yahei"; width: 80%; height: 2em; font-size: 1em; line-height: 2em; border: 0px; outline: 0px; padding: .2em 1em; margin: 0em 10%;}
        .btn-group { width: 100%; border-top: 1px solid #DDD; border-bottom: 2px solid #DDD;}
        button {width: 32%; text-align: center; border: 0; border-radius: 0; background-color: inherit; height: 44px; line-height: 44px; font-size: 15px;}  

</style>

<div id="search" style="display:none">
        <input type="text" id="start" placeholder="正在定位您的位置..." style="border-bottom: 1px solid #DDD; " />
        <input type="text" id="end" value="沈阳国际软件园B区1座" readonly="true" />
        <input type="hidden" id="start_point" value=""/>
        <input type="hidden" id="end_point" value="123.494817, 41.70496"/>
        <input type="hidden" id="start_location" value=""/>
        <div class="btn-group">
            <button id="bus-search">公交</button>
            <button id="driver-search">驾车</button>
            <button id="walk-search">步行</button>
        </div>
    </div>
    <div id="app">
    <div id="showMap" class="hide">
        <div class="nav">
            <div class="nav-inner">
                <div class="nav-sub"><a href="#" class="bus"><i></i></a></div>
                <div class="nav-sub"><a href="#" class="driver cur"><i></i></a></div>
                <div class="nav-sub"><a href="#" class="walk"><i></i></a></div>
            </div>
            <!-- <a href="javascript:;" id="reLocation">重新导航</a> -->
        </div>
        <div id="l-map"></div>
        <div id="r-result"></div>
    </div>
    </div>

 function getLocation(){
      var ep = $("#end_point").val().split(",");
   var map = new BMap.Map("l-map");
   var point = new BMap.Point(ep[0], ep[1]);
   map.centerAndZoom(point, 16);
   var geolocation = new BMap.Geolocation(); //创建一个百度地图的地理定位对象 
   geolocation.getCurrentPosition(showPosition)    
    }
    function showPosition(position){
        map.innerHTML="Latitude: " + position.latitude + "<br />Longitude: " + position.longitude;//来获取百度地图中的经纬度。
        window.location.href="http://api.map.baidu.com/direction?origin=latlng:"+position.latitude+","+position.longitude+"|name:沈阳国际软件园B区1座&destination=沈阳国际软件园B区1座&mode=driving&region=中国&output=html&src=yourCompanyName|yourAppName";
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值