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

一、简介

  所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括:折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。

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

时间: 2024-07-30 04:54:34

百度地图添加 标示——默认、自定义(小狐狸)标示的相关文章

百度地图api窗口信息自定义

百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delegate() 方法 原文链接http://www.w3school.com.cn/jquery/event_delegate.asp #pop为弹窗容器,#info为弹窗信息 将#info设置成绝对定位信息窗就可以流动了 demo <!DOCTYPE html> <html> <he

百度地图添加覆盖物与给定两点路线规划

final LatLng ll = new LatLng(latiide, longitude);                BitmapDescriptor descriptor = BitmapDescriptorFactory                        .fromResource(marker);                OverlayOptions options = new MarkerOptions().position(ll).icon(      

百度地图SDK3.2.0—自定义缩放按钮

转载注明出处:http://blog.csdn.net/zhshulin/article/details/41378927 百度地图SDK3.0今年6月5号更新之后,全面升级SDK接口设计,不兼容老版本. 本文简介:百度地图自带缩放控件很丑,即使在9月18号发布的3.1.1版本中开放了调整位置的接口依然无法满足我的需要,而且百度地图自己的产品就是位于右侧上下排列的两个缩放按钮,看着舒服,用着方便.故而本文说明的就是模仿这种实现的一个简单方法. 这是一个大神的解决方案,他用的百度地图版本为2.3,

百度地图添加多个行政区划

添加多个行政区划 并给他添加不同颜色 示例图 下面是代码 <!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=

项目中的百度地图添加标注,动态弹框

1.最近项目开发中,用到了地图,需求是使用百度地图 初始化地图: var list = ""; var map = ""; var drawingManager = ""; if (typeof (BMap) == 'undefined') { //地图加载失败 document.getElementById("allmap").innerHTML = "地图加载失败"; } else { /** 百度地图

百度地图 添加控件

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script typ

android百度地图 添加覆盖物Marker与InfoWindow的使用

如何添加覆盖物,实现周边搜索,以及对覆盖物的点击出现介绍等效果. 效果图: 我们的需求是,当用户点击衣食住行,或者对对附近搜索是,从服务器返回数据(经纬度,商家信息,介绍等),然后动态生成覆盖物,实现上述效果.关于图片,由于手机上的内存的有限性,所有的图片下载完成都应该存入预设的缓存中,例如LruCache,然后需要的时候从缓存取,缓存没有,下载完成放入缓存:即实现所有的图片所占的内存永远不会超过缓存预设的内存值,当然了本篇的重点不是这个,我直接拿了几张图片加入我们的项目中模拟. 1.承载数据的

百度地图添加覆盖物

按照官方的demo部署好以后.添加一个覆盖物. 需要的类: BitmapDescriptor  bitmap 图像对象  用于显示到覆盖物的地方. MapView  主要对象   有 页面上的控件实例化. BaiduMap  有mapView.getMap() ;  地图对象.可以添加各种东西到地图上. MapStatusUpdate  描述地图状态将要发生的变化. LatLng 地理坐标基本数据结构 直接由纬经度实例化. OverlayOptions  覆盖物配置对象.可以将覆盖物的图标,地理

百度地图 添加标注

给地图增加一个事件监听,addEventListener: 当鼠标点击地图时,首先获取改点坐标,其次在改点坐标处增加一个红色标注. <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type"