`

百度地图封装实现拉框效果

阅读更多

最近要做一个百度地图的拉框效果,仔细一查,百度地图竟然已经封装好了,兴奋了一下,问题来了,百度实现的是拉框搜索,而我要做的却不是这样的功能,唉,又看不懂百度的源码,只好发挥一下自己的聪明才智自己封装一下。

拉框.html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拉框</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
</head>
<body>
<input type="button" onclick="openbut()" value="开启"/>
<input type="button" onclick="closebut()" value="关闭"/>
<div style="width:1200px;height:570px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");      //设置卫星图为底图
var point1 = new BMap.Point(117.263865,34.151257);
map.centerAndZoom(point1,15);//设定地图的中心点和坐标并将地图显示在地图容器中
map.addControl(new BMap.NavigationControl());      //为地图添加鱼骨  
map.enableScrollWheelZoom();//启用地图滚轮放大缩
var dflag="0";
var sflag="0";
var a1="";
var b1="";
var a2="";
var b2="";
var polygon="";
function openbut(){
	dflag="1";
}
map.addEventListener("click", function(e){ 
	if(sflag=="1"){
		dflag="0";
		return;
	}	  
	if(dflag=="1"){
		a1=e.point.lng;
		b1=e.point.lat;
		beginMove();
	} 
	 
}); 


function beginMove(){
	map.addEventListener("mousemove", function(e){ 
		if(dflag=="1"){
			if(polygon!=""){
				map.removeOverlay(polygon);
				polygon="";
			}
			a2=e.point.lng;
			b2=e.point.lat;
			polygon = new BMap.Polygon([
			  new BMap.Point(a1,b1),
			  new BMap.Point(a2,b1),
			  new BMap.Point(a2,b2),
			  new BMap.Point(a1,b2)
			], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
			map.addOverlay(polygon);
			sflag="1";
		} 
	});	
}
</script>

 

 

 

 

1
0
分享到:
评论
1 楼 lyuaong2010 2015-05-24  
  这做法不错,百度地图 提供的拉框获取不到矩形的几点 

相关推荐

    基于 React 封装的百度地图组件,帮助你轻松的接入地图到 React 项目中,支持 React Hook

    在这个案例中,“基于React封装的百度地图组件”就是这样一个组件,它将百度地图API的功能包装成符合React规范的组件,使得开发者可以在React应用中像使用其他React组件一样使用地图功能。 接下来,我们要讨论React...

    百度地图封装

    1. **模型**:封装地图的配置,如缩放级别、中心点、地图类型等,以及地图上的对象,如标注、线、面等,确保数据独立于视图。 2. **视图**:更新地图显示,根据模型的变化自动调整,如改变地图样式、添加或移除标注...

    基于TypeScript的React封装百度地图组件设计源码

    该项目是基于TypeScript的React封装百度地图组件设计源码,共包含211个文件。其中,77个文件为TSX格式,62个为JSON配置文件,30个Markdown文档,29个TypeScript源文件,2个YAML配置文件,2个HTML模板文件,以及1个...

    百度地图javascript API + 调用封装javascript

    "百度地图javascript API + 调用封装javascript" 指的是使用百度地图提供的JavaScript接口,结合自定义的JavaScript代码,对这些API进行封装,以简化地图功能的调用过程,提高代码的可维护性和复用性。这种封装通常...

    封装好的百度地图API(有最完善的使用示例)

    地图展示 异步加载地图 同时加载两个地图 通过城市名设置中心(不支持)...鼠标拉框放大地图 鼠标点击拾取坐标 事件示例 地图加载完成 地图单击事件 覆盖物注册事件 传递事件参数 多个点注册事件 个性化 设置地图模板样式

    vue实现百度echart地图省市级别点击下钻显示效果

    在本文中,我们将深入探讨如何在Vue.js框架中利用百度ECharts实现地图的省市级别点击下钻显示效果。首先,我们需要了解Vue.js和百度ECharts的基本概念,然后逐步讲解实现这个功能的步骤。 Vue.js是一个轻量级的前端...

    vue+地图选点组件(百度地图)

    本组件是用于在地图上选点、回显坐标等

    百度定位封装

    在集成"百度定位封装"到项目时,首先需要在项目中引入百度地图SDK,然后按照封装库的文档指导配置相应的权限、初始化服务、注册监听器并实现回调方法。对于Android应用,可以在布局文件中添加地图控件,并在代码中...

    C# VS2010下前后台交互调用百度地图API 实现标注、测距、画轨迹、画圆

    在本文中,我们将深入探讨如何在C#与Visual Studio 2010环境下,通过后台交互调用百度地图API来实现一系列地图功能,包括标注、测距、画轨迹以及画圆。这些功能对于地理信息系统(GIS)应用或者任何需要地图可视化...

    springboot小功能:集成百度地图实现定位打卡功能

    当点下定位按钮时,可以在页面上显示所在区域的大致位置(精确到市级...使用百度地图的API实现定位功能,将返回的json数据封装成接口;点击按钮向接口请求数据,将请求后的定位信息使用javascript嵌入到文本域中。​​

    高德地图常用方法封装

    在"高德地图常用方法封装"项目中,开发者通常会把这些常用的API操作封装成函数或者类,方便在多个地方复用,同时通过配置参数实现灵活定制,提高代码组织和维护效率。例如,可以创建一个`PathPlanning`类来封装路径...

    Android调用百度地图API实现定位

    在Android开发中,集成百度地图API来实现定位功能是一项常见的任务。这涉及到多个技术知识点,包括Android SDK的使用、百度地图API的集成、位置服务的开启与使用、以及权限管理等。下面将详细阐述这些关键点。 首先...

    react-ReactBMap基于百度地图JavaScriptAPI封装的React组件库

    在本文中,我们将深入探讨"react-ReactBMap",这是一个基于百度地图JavaScript API封装的React组件库。ReactBMap允许React开发者轻松地在他们的应用中集成百度地图功能,为用户提供丰富的地图交互体验。理解并使用这...

    VC MFC调用百度地图API

    在MFC项目中,通常会将与百度地图API交互的部分封装成一个类或一系列函数,方便复用和管理。同时,注意遵守百度地图API的使用政策,防止因滥用导致的账号限制。 最后,实际的代码实现会涉及到具体的MFC控件操作、...

    调用百度地图的接口,实现小地图

    下面是一个基础的小地图实现步骤: 1. 引入百度地图JavaScript库:在HTML文件中,通过`&lt;script&gt;`标签引入百度地图的JS库,通常使用CDN链接: ```html 你的API密钥"&gt; ``` 2. 创建地图容器:在HTML中定义一个div...

    基于 React 封装的百度地图组件,支持 React Hook,帮助你轻松的接入地图到 React 项目中。.zip

    本文将详细介绍一个基于React封装的百度地图组件,该组件还支持React Hook,从而简化了在React项目中接入地图的流程。 首先,我们要理解React组件的基本概念。React组件是React应用程序的基础单元,它们可以像...

    H5调用百度地图原生

    然而,有时候为了实现更丰富的功能或者优化性能,我们需要将H5页面与原生应用进行交互,比如调用百度地图API。本文将详细探讨如何在H5框架中调用原生的百度地图插件,以便在网页上集成地图服务。 首先,我们需要...

    excle数据手动实现的百度地图标注

    python实现直接读取excle数据实现的百度地图标注:https://blog.csdn.net/weixin_41290949/article/details/120638695 项目说明 百度地图标注数据量不大,希望直接读取excle生成标注;同时会有修改、编辑的需求。 ...

    android高德地图封装工具类

    android高德地图封装工具类地图定位,绘制路径等等android高德地图封装工具类地图定位,绘制路径等等android高德地图封装工具类地图定位,绘制路径等等android高德地图封装工具类地图定位,绘制路径等等android高德...

Global site tag (gtag.js) - Google Analytics