1. 程式人生 > >百度地圖API 自定義標註圖標

百度地圖API 自定義標註圖標

cit rop 設置 src rip ddc 使用 options city

通過Icon類可實現自定義標註的圖標,下面示例通過參數MarkerOptions的icon屬性進行設置,
也可以使用marker.setIcon()方法。

<script type="text/javascript">
    // 百度地圖API功能
    var map = new BMap.Map("allmap");    // 創建Map實例
    map.centerAndZoom(new BMap.Point(116.323066,39.989956), 16);  // 初始化地圖,設置中心點坐標和地圖級別
    map.addControl(new BMap.MapTypeControl());   
//添加地圖類型控件 map.setCurrentCity("北京"); // 設置地圖顯示的城市 此項是必須設置的 map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放 var points = [ [116.316967,39.990748], [116.323938,39.989919], [116.328896,39.988039], [116.321135,39.987072], [116.332453,39.989007], [
116.324045,39.987984], [116.322285,39.988316], [116.322608,39.986381] ]; // 向地圖添加標註 for( var i = 0;i < points.length; i++){ var myIcon = new BMap.Icon("http://7xic1p.com1.z0.glb.clouddn.com/markers.png", new BMap.Size(23, 25), { // 指定定位位置 offset: new
BMap.Size(10, 25), // 當需要從一幅較大的圖片中截取某部分作為標註圖標時,需要指定大圖的偏移位置 imageOffset: new BMap.Size(0, 0 - i * 25) // 設置圖片偏移 }); var point = new BMap.Point(points[i][0],points[i][1]); // 創建標註對象並添加到地圖 var marker = new BMap.Marker(point,{icon: myIcon}); map.addOverlay(marker); }; </script>

所使用圖片:

技術分享圖片

演示地址:點擊

百度地圖API 自定義標註圖標