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


一、簡介

  所有疊加或覆蓋到地圖的內容,我們統稱為地圖覆蓋物。如標注、矢量圖形元素(包括:折線和多邊形和圓)、信息窗口等。覆蓋物擁有自己的地理坐標,當您拖動或縮放地圖時,它們會相應的移動。

地圖API提供了如下幾種覆蓋物:

Marker:標注表示地圖上的點,可自定義標注的圖標。

Label:表示地圖上的文本標注,您可以自定義標注的文本內容。

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

二、添加簡單標注

  標注表示地圖上的點。API提供了默認圖標樣式,您也可以通過Icon類來指定自定義圖標。Marker的構造函數的參數為Point和 MarkerOptions(可選)。注意:當您使用自定義圖標時,標注的地理坐標點將位於標注所用圖標的中心位置,您可通過Icon的offset屬性 修改標定位置。

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

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);                     // 將標注添加到地圖中

 

  可以通過設置標注是跳動

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

 

 

 

三、自定義標注圖標

  通過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>

 

    

 

四、可托拽的標注

  marker的enableDragging和disableDragging方法可用來開啟和關閉標注的拖拽功能。默認情況下標注不支持拖拽,您需要調 用marker.enableDragging()方法來開啟拖拽功能。在標注開啟拖拽功能后,您可以監聽標注的dragend事件來捕獲拖拽后標注的最 新位置。

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

 

 

五、內存釋放

在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  ,感謝您的耐心閱讀!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM