百度地图Api驾车路线查看代码

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=fhmGbYwGgddObGzVLAN8nbrt"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><!--调用jQuery-->
  
<style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
  
</head>
  
<body>
<div id="allmap"><br/><br/><br/>正在加载导航……</div>
</body>
</html>
<script type="text/javascript">
  
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
  
            /* 初始化地图并设置中心坐标 */
            var map = new BMap.Map("allmap"); // 创建地图实例
            var point = new BMap.Point(r.point.lng, r.point.lat); // 创建点坐标
            map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom();
  
            /* 修改当前位置标记图片 */
            var editMarkPic = true;
            if(editMarkPic){
                var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",new BMap.Size(23,25),{
                    anchor: new BMap.Size(10,10),
                    offset: new BMap.Size(10, 25), // 指定定位位置
                    imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
                });
                var mk = new BMap.Marker(r.point, {icon: myIcon});
            }else{
                var mk = new BMap.Marker(r.point);
            }
  
            map.addOverlay(mk);
            //地图中心点移到当前位置
            map.panTo(r.point);
  
            //获取当前位置并导航到终点
            var geoc = new BMap.Geocoder();
            geoc.getLocation(point, function (rs) {
  
                /* 终点经纬度和地点名称 */
                var des_lng = 121.44952378448;
                var des_lat = 31.272986579927;
                var des_address = "沪太路3717弄152号楼";
  
                /* 获取当前出发地名称 */
                var addComp = rs.addressComponents;
                var currentAddress = addComp.province + addComp.city + addComp.district + addComp.street;
  
                /* 获取当前出发地经纬度 */
                var latCurrent = r.point.lat;
                var lngCurrent = r.point.lng;
  
                /* 驾车路线 */
                var end_point = new BMap.Point(des_lng,des_lat);
                var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
                driving.search(point, end_point);
  
                /* 步行路线 */
                var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
                walking.search(currentAddress, des_address);
  
                /* 公交路线 */
                var transit = new BMap.TransitRoute(map, {
                    renderOptions: {map: map, panel: "r-result"}
                });
                transit.search(currentAddress, des_address);
  
                //跳转到百度地图查看多种路线规划
                window.location.href="http://api.map.baidu.com/direction?origin=latlng:"+ latCurrent + "," + lngCurrent + "|name:" + currentAddress + "&destination=latlng:"+ des_lat +","+ des_lng +"|name:" + des_address + "&mode=driving&region="+ addComp.city +"&output=html";
            });
  
        }
        else {
            alert('failed'+this.getStatus());
        }
    },{enableHighAccuracy: true})
  
</script>

百度API文档地址:http://developer.baidu.com/map/jsdemo.htm#i4_7

注意:

 以上代码为使用样例,并非全部需要,根据需要进行删减

by 雪洁 2018-05-18 06:50:37 500 views
我来说几句

相关文章