百度地图开放API示例整理-覆盖物

OverLay  覆盖物的抽象基类 不能实例化

下图所示为其子类实现。

http://developer.baidu.com/map/reference/index.php?

title=Class:%E8%A6%86%E7%9B%96%E7%89%A9%E7%B1%BB/PointCollection

Map.addOverLay 添加覆盖物

添加基本的覆盖物代码:

	var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点
	var polyline = new BMap.Polyline([
		new BMap.Point(116.399, 39.910),
		new BMap.Point(116.405, 39.920),
		new BMap.Point(116.425, 39.900)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});   //创建折线

	var circle = new BMap.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆

	var polygon = new BMap.Polygon([
		new BMap.Point(116.387112,39.920977),
		new BMap.Point(116.385243,39.913063),
		new BMap.Point(116.394226,39.917988),
		new BMap.Point(116.401772,39.921364),
		new BMap.Point(116.41248,39.927893)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建多边形

	var pStart = new BMap.Point(116.392214,39.918985);
	var pEnd = new BMap.Point(116.41478,39.911901);
	var rectangle = new BMap.Polygon([
		new BMap.Point(pStart.lng,pStart.lat),
		new BMap.Point(pEnd.lng,pStart.lat),
		new BMap.Point(pEnd.lng,pEnd.lat),
		new BMap.Point(pStart.lng,pEnd.lat)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建矩形

	//添加覆盖物
	function add_overlay(){
		map.addOverlay(marker);            //增加点
		map.addOverlay(polyline);          //增加折线
		map.addOverlay(circle);            //增加圆
		map.addOverlay(polygon);           //增加多边形
		map.addOverlay(rectangle);         //增加矩形
	}
	//清除覆盖物
	function remove_overlay(){
		map.clearOverlays();         
	}

设置点的跳动动画

marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
// BMAP_ANIMATION_DROP//坠落动画

创建新的图标 主要是构建一个Icon ,然后在构造时指定。

/创建小狐狸
	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);              // 将标注添加到地图中

是否可拖拽

marker.disableDragging();           // 不可拖拽

marker.enableDragging() // 可拖拽

提示窗口 折线  区域块等 可参考api文档。

时间: 2024-07-31 19:31:50

百度地图开放API示例整理-覆盖物的相关文章

百度地图开放API示例整理-基本地图和控件

<%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

百度地图开放API初体验(三)

前面已经实现了利用百度地图进行定位的功能,定位只是一个基本的依托,现在我们可以利用它来做更多的东西,例如位置提醒服务.在定位API的模块中,BDMap 还提供了一个地理围栏服务的板块,但是正如它里面介绍所说,目前只是一个Beta版本,博主登录过百度LBS的开放平台论坛,看到上面所提及到的Bug仍然存在很多,所以这里不作这方面的介绍.在API当中,里面有一个位置提醒使用的介绍,本篇主要介绍这个功能.值得注意的是,这里为了显现定位提醒功能实现成功,在提醒服务里面增加了一个手机震动的功能. 一.实现位

百度地图JavaScript API覆盖物旋转时出现偏移

在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节的错: <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(121.38750613, 31.17

百度地图JS API移动端,phonegap 自定义覆盖物Click事件无法执行 的 bug 解决方法

当你为自定义覆盖物添加了click事件后,你会发现在移动端是无论如何也触发不了的,这算是一个BUG. 最近我在为我的地图APP开发第二版,在为一个覆盖物添加行为事被困扰到了,自定义覆盖物的click事件竟然无法在iPhone端触发,以及百度地图JS API里面的开源库涉及到自定义覆盖物click事件的均无效. 我为这个BUG烦恼了很久,直到今天,在QQ群里网友(在此要先感谢这位网友mooring)告诉了我解决方法:iPhone上的自定义覆盖物事件默认会触发map的click事件,如果map定义了

百度地图JavaScript API使用

最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以想着地图应该是相似的,百度地图可能也能实现这样的功能,于是就开始了百度地图JavaScript API使用的学习探究了. 简单介绍:百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用,包含了构建地图基本功能的各

你永远学不会的设计--&gt;百度地图map api key 的设置

哈哈 说到咱的互联网大佬 baidu, 真是无人不知,无人不晓,可是多少人能领会他的设计哲学呢? 来看看吧.... 事情要从上周的一个小实验说起,目标是调用baidu map api 做个产品原型. 通常呢,调用API 都是需要申请key的,方便有针对性地统计调用请求的情况,这个是行业的通用做法,然后小弟就去官网乖乖申请了个key, 然后呢,有一大堆的api 分类,啥 place API, route API , static map API 不管统统给我选上, 接下来就是查看api 开发文档示

[Baidu Map]百度地图 JAVASCRIPT API V2.0 大众版 工具类

关键代码: /* *@description 百度地图 JAVASCRIPT API V2.0 大众版 工具类 *@author YanZhiwei *@see http://developer.baidu.com/map/reference/index.php *@email [email protected] */ (function () { map = {}; infoWindow = {}; BmapUtils = { CONSTANT: { DYNAMIC_CITY: "上海&quo

百度地图的API接口----多地址查询和经纬度

最近看了百度地图的API的接口,正想自己做点小东西,主要是多地址查询和经纬度坐标跟踪, 下面的代码直接另存为html就可以了. <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" c

百度地图 JavaScript API极速版 开发体会

前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发者细分成普通web开发者和移动web开发者.正好用到了手机地图这块决定尝试一下.先看一下百度地图官方对它的定义.     本套百度地图API是专为手机浏览器提供的API,您可使用该套API,在手机页面中展示地图.标注位置.检索poi.查询线路等. 特点: 较同时兼容PC和手机浏览器的JavaScript API大众版而言,该版更适配移动设备,体积更小,加载地图速度更快,更省流