百度地图添加标示——默认、自定义（小狐狸）标示

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 ,感谢您的耐心阅读！

百度地图添加 标示——默认、自定义（小狐狸）标示

百度地图添加标示——默认、自定义（小狐狸）标示