第二章 做做小练习

如果你看过了百度的示例和参考类 (不需要全都记得,有个大概的印象就行),那么接下来就是如何把这些东西转化成实际的成果,变成属于你的牢靠的知识技能

最好的方法就是实践,没有比实践更能将理论转化为实际的方法了

下面我给几道简单的百度API练习题

有以下十个坐标

116.307852, 40.357031
116.313082, 40.247674
116.328749, 40.126922
116.337571, 39.918698
116.338852, 39.810031
116.340082, 39.700674
116.347749, 39.686922
116.347749, 39.586922
116.357574, 39.458695
116.361528, 39.338878

题目1：循环标注

1、左边是地图,右边有两个按钮:"开始"和"停止"按钮

2、点击开始按钮时,每0.5秒在地图上循环标注出10个坐标的地点,先标注第一个位置,隔0.5秒后标注第二个

3、当10个坐标都标注出来后,清楚掉所有标注,重新循环标注

4、点击停止按钮，点击后停止循环。在点击开始,就继续循环

提示:会用到的方法

1.实现循环

 setInterval("方法名称",500);  这个方法的作用是没隔500毫秒执行一下双引号中的方法一次

     settimeout("方法名称",500); 这个方法的作用是在500毫秒后执行双引号中的方法一次

     用这两个方法都可以实现循环添加标注的功能

2.初始化地图

    //双引号中的是地图容器div的id,因为我们要放两个按钮,所以界面上会有两个div,这里别弄错了

    var map = new BMap.Map("l-map");  
     // 设置中心点坐标和地图级别。中心点就是地图出现的时候中心的位置,地图级别,数字越小,看到的范围越大,如果是1,可以看到全世界的地图,如果是16或更大,能看到街道

    map.centerAndZoom("北京", 10);            

    //启用滚轮放大缩小 ,通过鼠标的滚轮可以调节地图的级别          

    map.enableScrollWheelZoom();                       

3.根据坐标创建标注

   //把坐标转化成百度的坐标对象

 

    var point= new BMap.Point(116.307852, 40.357031);

   //Marker方法就是创建标注的方法,参数是point

    var marker = new BMap.Marker(point);

   //再调用地图对象map的addOverlay()方法,把标注对象传进去

    map.addOverlay(marker);

4.清楚所有标注

 

//下面的方法是清除地图上所有可清除的覆盖物

map.clearOverlays();

覆盖物不只是标注,还有折线,文本标签这些,可以看一下示例或参考类

那什么是可清除的覆盖物,如果覆盖物调用了enableMassClear();方法,表示在调用map.clearOverlays()方法时,它会被调用

比如marker .enableMassClear();那清除是这个marker就会被清除掉,覆盖物在初始化时默认都是可以清除的,所以不调用也行

//如果不想某个覆盖物被清除掉，可以使用以下函数设置：

marker.disableMassClear()禁止覆盖物在map.clearOverlays方法中被清除。

 

5 如果觉得循环有难度,可以先试着把所有的标注都标出来,在慢慢改成用循环实现

效果如下图

 

 

题目2：连接标注

1、在第一题的基础上加一个功能:循环标注的时候,用折线将两个点连接起来

2、并当循环到最后一个的时候清除线段，再继续循环。

效果如下图

提示:会用到的方法

1.创造折线

        //创建折线对象

var polyline = new BMap.Polyline([pointA, pointB], { strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5 });
        //添加到地图

map.addOverlay(polyline);

 

Polyline方法的参数

l        坐标数组(坐标要2个以上),画的时候按照数组的顺序来

l       折线的样式, strokeColor 是折线的颜色, strokeWeight是折线的宽度, strokeOpacity是透明度

 

题目3：坐标转换

1、如果以上十个坐标是GPS坐标，怎么转换后实现题目2的功能？

题目3效果类似题目2

 

提示:会用到的方法

1.坐标转换

gps转化为百度坐标
BMap.Convertor.translate(gpsPoint,0,translateCallback);     //真实经纬度转成百度坐标
Translate方法参数详解
  gps的坐标,
  转换的类型(gps转百度是0,谷歌转百度是2),
   回调函数

 

ok,大概就这几道题,后面我会把题目的代码贴出来并进行解释