百度地图API的第一次接触——标注和信息窗的使用

1.定义js函数，用于在指定位置添加标注，在标注位置添加并打开信息窗口

    function addMarker(point, index){

                      

      // 创建图标对象

                      

      var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {

                      

      　　offset: new BMap.Size(10, 25),                  // 指定定位位置

                      

      　　imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移

                      

      });

                      

      var marker = new BMap.Marker(point, {icon: myIcon});//使用图标对象创建标注

                      

      map.addOverlay(marker);

                       

      marker.addEventListener("click", function(){         // 标注点击事件监听

                          

           var opts = {

                                  

               width : 250,     // 信息窗口宽度

                                  

               height: 120,     // 信息窗口高度

                                  

               title : "InfoWindow"  // 信息窗口标题

                                  

      }

                                  

      var infoWindow = new BMap.InfoWindow("Hello World!", opts);  // 创建信息窗口对象

                                  

      map.openInfoWindow(infoWindow, point);      // 在标注处打开信息窗口



                          

     });



                      

 }

 

2.随机在地图内生成5个标注

    var bounds = map.getBounds();  //获得地图边界

                      
　　

    var lngSpan = bounds.maxX - bounds.minX; 

                      

    var latSpan = bounds.maxY - bounds.minY;

                      

    for (var i = 0; i < 5; i ++) {

                      

        var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));  //在地图范围内随机生成点

                      

        addMarker(point, i);//调用1中js函数

                      

   }

3.打开浏览器看效果