百度地圖添加標示——默認、自定義（小狐狸）標示

1、簡介javascript

　　全部疊加或覆蓋到地圖的內容，咱們統稱爲地圖覆蓋物。如標註、矢量圖形元素(包括：折線和多邊形和圓)、信息窗口等。覆蓋物擁有本身的地理座標，當您拖動或縮放地圖時，它們會相應的移動。css

地圖API提供了以下幾種覆蓋物：html

Marker：標註表示地圖上的點，可自定義標註的圖標。 java

Label：表示地圖上的文本標註，您能夠自定義標註的文本內容。 api

　　可使用map.addOverlay方法向地圖添加覆蓋物，使用map.removeOverlay方法移除覆蓋物，注意此方法不適用於InfoWindow。函數

2、添加簡單標註動畫

　　標註表示地圖上的點。API提供了默認圖標樣式，您也能夠經過Icon類來指定自定義圖標。Marker的構造函數的參數爲Point和 MarkerOptions（可選）。注意：當您使用自定義圖標時，標註的地理座標點將位於標註所用圖標的中心位置，您可經過Icon的offset屬性修改標定位置。ui

下面的示例向地圖中心點添加了一個標註，並使用默認的標註樣式。spa

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
var marker = new BMap.Marker(point);        // 建立標註    
map.addOverlay(marker);                     // 將標註添加到地圖中

　　能夠經過設置標註是跳動的scala

marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫

3、自定義標註圖標

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

<!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:"微軟雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
    <title>設置點的新圖標</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地圖API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    
    //建立小狐狸
    var pt = new BMap.Point(116.417, 39.909);
    var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157));  //定義本身的標註
    var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 建立標註
    map.addOverlay(marker2);              // 將標註添加到地圖中
</script>

4、可託拽的標註

　　marker的enableDragging和disableDragging方法可用來開啓和關閉標註的拖拽功能。默認狀況下標註不支持拖拽，您須要調用marker.enableDragging()方法來開啓拖拽功能。在標註開啓拖拽功能後，您能夠監聽標註的dragend事件來捕獲拖拽後標註的最新位置。

marker.enableDragging(); //設置其可拖拽   
marker.addEventListener("dragend", function(e){    
 alert("當前位置：" + e.point.lng + ", " + e.point.lat);    
})

5、內存釋放

在API 1.0版本中，若是您須要在地圖中反覆添加大量的標註，這可能會佔用較多的內存資源。若是您的標註在移除後再也不使用，可調用 Overlay.dispose()方法來釋放內存。注意在1.0版本中，調用此方法後標註將不能再次添加到地圖上。自1.1版本開始，您不在須要使用此方法來釋放內存資源，API會自動幫助您完成此工做。

例如，您能夠在標註被移除後調用此方法：

map.removeOverlay(marker);    
marker.dispose(); // 1.1 版本不須要這樣調用

ps：最基礎知識可看：http://www.cnblogs.com/0201zcr/p/4679444.html ,感謝您的耐心閱讀！

百度地圖添加 標示——默認、自定義（小狐狸）標示

百度地圖添加標示——默認、自定義（小狐狸）標示