你的位置:首页 > Java教程

[Java教程]百度地图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.打开浏览器看效果