程序博客网 > 汤姆克鲁斯知乎

百度地图实现根据路线添加覆盖物

来源：互联网发布：汤姆克鲁斯知乎编辑：程序博客网时间：2024/04/28 08:57

第一步：在jsp文件的<head>标签中引入百度地图api，<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>，1.2的版本是不需要密匙，其他版本请申请密匙

第二部：设置地图铺满全屏

<style type="text/css">
           html{height:100%}
           body{height:100%;margin:0px;padding:0px}
           #allmap{height:100%}
</style>

第三部：在<body>标签中添加<div>

<div id="allmap">

</div>

第四部：写js代码

<script type="text/javascript">
       var map = new BMap.Map("allmap");//创建map实例
       map.centerAndZoom(new BMap.Point(116.438764,39.914714),8);//初始化map实例，默认以现有坐标为中心
       map.enableScrollWheelZoom();
       map.addControl(new BMap.NavigationControl());
       map.addControl(new BMap.ScaleControl());
       map.addControl(new BMap.OverviewMapControl());

       function searchMap(){


           for(var k = 1;k<=totalPage;k++){//根据内容来分布ajax请求坐标点
               $.ajax({
                   type:"POST",
                   url:"../tudaapi/ajaxToMap.form?currentPage="+k+"&authCode="+authCode+"&id="+liftId,
                   success:function(data){
                       var locationSites = data;
                       var jsonLocations = eval(locationSites);
                       var driving = new BMap.DrivingRoute(map);    //创建驾车实例
                       var points = new Array();//创建一个用来存放坐标点的数组
                       for(var i = 0;i<jsonLocations.length;i++){
                           var point = new BMap.Point(jsonLocations[i].latitude,jsonLocations[i].longitude);
                           points.push(point);
                           var marker = new BMap.Marker(point);
                           map.addOverlay(marker);
                       }
                       for(var j = 0;j<points.length-1;j++){
                           driving.search(points[j],points[j+1]);
                       }
                       driving.setSearchCompleteCallback(function(){
                            var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
                            var polyline = new BMap.Polyline(pts,{strokeColor:"blue", strokeWeight:4, strokeOpacity:0.5});
                            map.addOverlay(polyline);
                       });
                       map.setViewport(points);          //调整到最佳视野
                   }
               });
           }

       }

   </script>

0 0

汤姆克鲁斯知乎

汤姆克鲁斯知乎

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子改签规则手机改自己家wifi密码步骤患病科学家改造成半机器人 290883改为改为转述句改为陈述句 9900lu改为改为哥哥嘿改为33嘿点击进入直述句改为转述句改为双重否定句 93号汽油改为92还是95 满族姓氏改为汉族姓氏对照表麦苗儿嫩改为感叹句答谢中书书改为白话散文改为一般疑问句火焰温暖明亮改为感叹句树叶飘落下来改为比喻句民事诉讼时效改为三年桃花从树上落下来改为比喻句结婚年龄规定2019改为19岁这不是难为蝴蝶吗改为陈述句蝴蝶肯定也有家改为设问句小鸟在树枝上叫改为拟人句机西高速为什么改为安罗高速二居改三居隔断效果图唐槐园二期综改区敢不敢买龙珠改第二季日语科目二改自动挡会很吃亏吗改签可以改第二天的吗二楼改独立下水多少钱二年级被字句改把字句大全二楼改下水道多少钱二居改三居西安地铁五号线二期线路改了无座票上车后可以改二等座改写人生改写暮江吟改写示儿改写 word改写