Advertisement

手机H5-调用百度地图导航

阅读量:

HTML

复制代码
    <div id="allmap"></div>

JS

复制代码
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script> //引入百度地图 ak=你的ak
    
    <script src="js/jquery.min.js"></script> //引入	JQ
    
    <script type="text/javascript">
    
    var map = new BMap.Map("allmap");
    
    var point = new BMap.Point(116.709684,39.89778);
    
    map.centerAndZoom(point, 16);
    
    map.enableScrollWheelZoom();
    
    var myIcon = new BMap.Icon("myicon.png",new BMap.Size(30,30),{
    
        anchor: new BMap.Size(10,10)
    
    });
    
    var marker=new BMap.Marker(point,{icon: myIcon});
    
    map.addOverlay(marker);
    
    var geolocation = new BMap.Geolocation();
    
    geolocation.getCurrentPosition(function(r){
    
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
    
            var mk = new BMap.Marker(r.point);
    
            map.addOverlay(mk);
    
            var latCurrent = r.point.lat;
    
            var lngCurrent = r.point.lng;
    
            location.href="http://api.map.baidu.com/direction?origin="+latCurrent+","+lngCurrent+"&destination=23.134274,113.372867&mode=driving&region=哈尔滨&output=html";
    
            //destination 替换成经纬度、 注意别写反了
            //region 替换城市名称
        }
    
        else {
    
            alert('failed'+this.getStatus());
        }
    
    },{enableHighAccuracy: true})
    
    </script>

这里采用了基于HTML5利用百度地图API定位并直接引导用户前往目标位置的技术手段,并源自该教程

全部评论 (0)

还没有任何评论哟~