一、百度地圖准備
https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey
二、根據類別不同做不同的標注（設置覆蓋物，即自己准備的圖片）
通過Icon類可實現自定義標注的圖標，下面示例通過參數MarkerOptions的icon屬性進行設置，您也可以使用marker.setIcon()方法。
var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); // 編寫自定義函數，創建標注 function addMarker(point, index){ // 創建圖標對象 var myIcon = new BMap.Icon("markers.png", new BMap.Size(23, 25), { // 指定定位位置。 // 當標注顯示在地圖上時，其所指向的地理位置距離圖標左上 // 角各偏移10像素和25像素。您可以看到在本例中該位置即是 // 圖標中央下端的尖角位置。 anchor: new BMap.Size(10, 25), // 設置圖片偏移。 // 當您需要從一幅較大的圖片中截取某部分作為標注圖標時，您 // 需要指定大圖的偏移位置，此做法與css sprites技術類似。 imageOffset: new BMap.Size(0, 0 - index * 25) // 設置圖片偏移 }); // 創建標注對象並添加到地圖 var marker = new BMap.Marker(point, {icon: myIcon}); map.addOverlay(marker); } // 隨機向地圖添加10個標注 var bounds = map.getBounds(); var lngSpan = bounds.maxX - bounds.minX; var latSpan = bounds.maxY - bounds.minY; for (var i = 0; i < 10; 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); }
三、完整代碼及效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; font-family: "微軟雅黑"; } h2{ font-family:隸書; font-size: 18; } </style> <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=1CP82D4yZqwEXmsuje96jrxfKWTInh0I&services=&t=20170517145936"></script> <title>地圖展示</title> </head> <body> <div id="allmap" ></div> </body> </html> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap"); // 創建Map實例 map.centerAndZoom(new BMap.Point(115.909, 28.6757), 6); // 初始化地圖,設置中心點坐標和地圖級別 //添加地圖類型控件 map.addControl(new BMap.MapTypeControl({ mapTypes: [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ] })); map.setCurrentCity("江西"); // 設置地圖顯示的城市 此項是必須設置的 map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放 // 編寫自定義函數,創建標注 function addMarker(point,index,img){ img = 'img/'+img+'.png' var myIcon = new BMap.Icon(img, new BMap.Size(16, 16), { // 指定定位位置。 // 當標注顯示在地圖上時，其所指向的地理位置距離圖標左上 // 角各偏移10像素和25像素。您可以看到在本例中該位置即是 // 圖標中央下端的尖角位置。 anchor: new BMap.Size(16 ,16), // 設置圖片偏移。 // 當您需要從一幅較大的圖片中截取某部分作為標注圖標時，您 // 需要指定大圖的偏移位置，此做法與css sprites技術類似。 // imageOffset: new BMap.Size(0, 0 - index * 25) // 設置圖片偏移 }); var marker = new BMap.Marker(point, {icon: myIcon}); marker.addEventListener('click', function (e) { // 通過點擊的坐標創建一個點對象，添加標簽 var point = new BMap.Point(e.point.lng, e.point.lat); var opts = { enableMessage: false, } var infowindow = new BMap.InfoWindow("<p style='font-family:隸書;font-size: 24;'>草履蚧雄成蟲:分布於灌南；徐州：<br>雲龍區、鼓樓區、泉山區..<a href='#'>詳情<a></p><img src='./img/000215.png' style='height: 200px;'>" , opts); map.openInfoWindow(infowindow, point); }); map.addOverlay(marker); } // 隨機向地圖添加25個標注 var bounds = map.getBounds(); var sw = bounds.getSouthWest(); var ne = bounds.getNorthEast(); var lngSpan = Math.abs(sw.lng - ne.lng); var latSpan = Math.abs(ne.lat - sw.lat); for (var i = 0; i < 5; i ++) { var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7)); addMarker(point,i,'lan'); } for (var i = 0; i < 5; i ++) { var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7)); addMarker(point,i,'fen'); } for (var i = 0; i < 5; i ++) { var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7)); addMarker(point,i,'huang'); } for (var i = 0; i < 5; i ++) { var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7)); addMarker(point,i,'hong'); } for (var i = 0; i < 5; i ++) { var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7)); addMarker(point,i,'lv'); } </script>
