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.打開瀏覽器看效果

轉載于:https://www.cnblogs.com/TomSnail/p/4352806.html

總結

以上是生活随笔為你收集整理的百度地图API的第一次接触——标注和信息窗的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。