`
CshBBrain
  • 浏览: 637876 次
  • 性别: Icon_minigender_1
  • 来自: 成都
博客专栏
B7d9bf34-126e-301f-819e-81f2615b5a2a
开源WebSocket服务...
浏览量：142077
Group-logo
HTML5移动开发
浏览量：135424
社区版块
存档分类
最新评论

百度地图API - 行车路线 轨迹

 
阅读更多

转自：http://hi.baidu.com/hackerbase/item/0a54b12d0005690e72863e3c

 

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>驾车途经点</title>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>  
</head>  
<body>  
<p><input type='button' value='开始' onclick='run();' /></p>  
<div style="width:820px;height:500px;border:1px solid gray" id="container"></div>  
<script type="text/javascript">  
    var map = new BMap.Map("container");  
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);  
    map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件  
    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件  
    map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件  
      
    var myP1 = new BMap.Point(106.521436,29.532288);    //起点-重庆  
    var myP2 = new BMap.Point(108.983569,34.285675);    //终点-西安  
    var myP3 = new BMap.Point(116.404449,39.920423);    //终点-北京  
      
    window.run = function (){  
        map.clearOverlays();                        //清除地图上所有的覆盖物  
        var driving = new BMap.DrivingRoute(map);    //创建驾车实例  
        driving.search(myP1, myP2);                 //第一个驾车搜索  
        driving.search(myP2, myP3);                 //第二个驾车搜索  
        driving.setSearchCompleteCallback(function(){  
            var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组  
      
            var polyline = new BMap.Polyline(pts);       
            map.addOverlay(polyline);  
              
            var m1 = new BMap.Marker(myP1);         //创建3个marker  
            var m2 = new BMap.Marker(myP2);  
            var m3 = new BMap.Marker(myP3);  
            map.addOverlay(m1);  
            map.addOverlay(m2);  
            map.addOverlay(m3);  
              
            var lab1 = new BMap.Label("起点",{position:myP1});        //创建3个label  
            var lab2 = new BMap.Label("途径点",{position:myP2});  
            var lab3 = new BMap.Label("终点",{position:myP3});     
            map.addOverlay(lab1);  
            map.addOverlay(lab2);  
            map.addOverlay(lab3);  
              
            setTimeout(function(){  
                map.setViewport([myP1,myP2,myP3]);          //调整到最佳视野  
            },1000);  
              
        });  
    }  
</script>  
</body>  
</html>  

分享到：
| HTML5音乐播放器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics