最近要做一个百度地图的拉框效果，仔细一查，百度地图竟然已经封装好了，兴奋了一下，问题来了，百度实现的是拉框搜索，而我要做的却不是这样的功能，唉，又看不懂百度的源码，只好发挥一下自己的聪明才智自己封装一下。
拉框.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>
这做法不错，百度地图 提供的拉框获取不到矩形的几点 
相关推荐
在这个案例中，“基于React封装的百度地图组件”就是这样一个组件，它将百度地图API的功能包装成符合React规范的组件，使得开发者可以在React应用中像使用其他React组件一样使用地图功能。 接下来，我们要讨论React...
百度地图基础功能封装，定位，计算，编码，等。。。。。。
本文将详细讲解如何进行“iOS百度地图定位封装”，并介绍如何实现点对点的距离判断，以便判断用户是否进入特定区域内。 首先，我们需要在项目中引入百度地图SDK。这通常通过CocoaPods或手动导入的方式完成。对于...
该项目是基于TypeScript的React封装百度地图组件设计源码，共包含211个文件。其中，77个文件为TSX格式，62个为JSON配置文件，30个Markdown文档，29个TypeScript源文件，2个YAML配置文件，2个HTML模板文件，以及1个...
"百度地图javascript API + 调用封装javascript" 指的是使用百度地图提供的JavaScript接口，结合自定义的JavaScript代码，对这些API进行封装，以简化地图功能的调用过程，提高代码的可维护性和复用性。这种封装通常...
地图展示 异步加载地图 同时加载两个地图 通过城市名设置中心(不支持)...鼠标拉框放大地图 鼠标点击拾取坐标 事件示例 地图加载完成 地图单击事件 覆盖物注册事件 传递事件参数 多个点注册事件 个性化 设置地图模板样式
在本文中，我们将深入探讨如何在Vue.js框架中利用百度ECharts实现地图的省市级别点击下钻显示效果。首先，我们需要了解Vue.js和百度ECharts的基本概念，然后逐步讲解实现这个功能的步骤。 Vue.js是一个轻量级的前端...
现在将市面上应用最广泛的三家地图服务集成到一个APP上，实现百度地图、高德地图、腾讯地图的对比。现将整个开发步骤进行记录。 ———————————————— 版权声明：本文为CSDN博主「nanjumufeng」的原创...
在集成"百度定位封装"到项目时，首先需要在项目中引入百度地图SDK，然后按照封装库的文档指导配置相应的权限、初始化服务、注册监听器并实现回调方法。对于Android应用，可以在布局文件中添加地图控件，并在代码中...
在本文中，我们将深入探讨如何在C#与Visual Studio 2010环境下，通过后台交互调用百度地图API来实现一系列地图功能，包括标注、测距、画轨迹以及画圆。这些功能对于地理信息系统（GIS）应用或者任何需要地图可视化...
在"高德地图常用方法封装"项目中，开发者通常会把这些常用的API操作封装成函数或者类，方便在多个地方复用，同时通过配置参数实现灵活定制，提高代码组织和维护效率。例如，可以创建一个`PathPlanning`类来封装路径...
在本文中，我们将深入探讨"react-ReactBMap"，这是一个基于百度地图JavaScript API封装的React组件库。ReactBMap允许React开发者轻松地在他们的应用中集成百度地图功能，为用户提供丰富的地图交互体验。理解并使用这...
在MFC项目中，通常会将与百度地图API交互的部分封装成一个类或一系列函数，方便复用和管理。同时，注意遵守百度地图API的使用政策，防止因滥用导致的账号限制。 最后，实际的代码实现会涉及到具体的MFC控件操作、...
本文将详细介绍一个基于React封装的百度地图组件，该组件还支持React Hook，从而简化了在React项目中接入地图的流程。 首先，我们要理解React组件的基本概念。React组件是React应用程序的基础单元，它们可以像...
本文将详细介绍如何使用百度定位SDK来封装并实现这一功能。百度定位SDK为开发者提供了丰富的定位服务，包括GPS、网络定位等多种定位方式，适用于各种场景。 首先，我们需要在项目中引入百度定位SDK。这通常通过在...
python实现直接读取excle数据实现的百度地图标注：https://blog.csdn.net/weixin_41290949/article/details/120638695 项目说明 百度地图标注数据量不大，希望直接读取excle生成标注；同时会有修改、编辑的需求。 ...
android高德地图封装工具类地图定位，绘制路径等等android高德地图封装工具类地图定位，绘制路径等等android高德地图封装工具类地图定位，绘制路径等等android高德地图封装工具类地图定位，绘制路径等等android高德...
在本文中，我们将深入探讨如何在Delphi编程环境中利用百度地图API来显示标记点。首先，我们需要理解Delphi和百度地图API的基本概念。 Delphi是一款强大的面向对象的 Pascal 编程环境，它由Embarcadero公司开发，...
这是一款简单的百度地图MVC实例，目前仅封装了百度地图的API，仅供学习交流使用， 需要的朋友可以下载学习一下。 二、注意事项 1、开发环境为Visual Studio 2013，无数据库，使用.net 4.0开发。 2、该源码仅供...
本篇将深入讲解如何在JSP页面中结合SpringMVC框架，利用百度地图API实现地理位置的定位功能。 首先，我们需要了解SpringMVC，它是一个强大的MVC（Model-View-Controller）框架，为Java Web应用程序提供了模型层、视...