最近要做一个百度地图的拉框效果,仔细一查,百度地图竟然已经封装好了,兴奋了一下,问题来了,百度实现的是拉框搜索,而我要做的却不是这样的功能,唉,又看不懂百度的源码,只好发挥一下自己的聪明才智自己封装一下。
拉框.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>
相关推荐
百度地图基础功能封装,定位,计算,编码,等。。。。。。
基于高德地图Android SDK进行封装,配合Kotlin实现展示地图效果
地图展示 异步加载地图 同时加载两个地图 通过城市名设置中心(不支持)...鼠标拉框放大地图 鼠标点击拾取坐标 事件示例 地图加载完成 地图单击事件 覆盖物注册事件 传递事件参数 多个点注册事件 个性化 设置地图模板样式
百度地图的定位封装,包含点对点的距离判断(是否进入区域内)
本组件是用于在地图上选点、回显坐标等
现在将市面上应用最广泛的三家地图服务集成到一个APP上,实现百度地图、高德地图、腾讯地图的对比。现将整个开发步骤进行记录。 ———————————————— 版权声明:本文为CSDN博主「nanjumufeng」的原创...
当点下定位按钮时,可以在页面上显示所在区域的大致位置(精确到市级...使用百度地图的API实现定位功能,将返回的json数据封装成接口;点击按钮向接口请求数据,将请求后的定位信息使用javascript嵌入到文本域中。
使用百度SDK,封装了几个方法,实现定位功能。
这是一款简单的百度地图MVC实例,目前仅封装了百度地图的API,仅供学习交流使用, 需要的朋友可以下载学习一下。 二、注意事项 1、开发环境为Visual Studio 2013,无数据库,使用.net 4.0开发。 2、该源码仅供...
使用百度地图API可作为项目的类库文件,可以实现查看目标地区的全景,附近景点,乘车路线等。
百度、高德、腾讯、天地图、谷歌、必应等自定义地图/图片叠加层/瓦片图/金字塔图地图切图高清切片生成工具 MapCutter(旧名MapTiler) ,定位便捷,支持超大地图,支持leaflet、maptalks、openlayers、cesium、及...
jQuery实现标题滑动框效果,已经打包好的封装源码!
基于百度地图JavaScript Api封装的React组件库,使用这个库最好需要先了解React和百度地图JavaScript Api。
python实现直接读取excle数据实现的百度地图标注:https://blog.csdn.net/weixin_41290949/article/details/120638695 项目说明 百度地图标注数据量不大,希望直接读取excle生成标注;同时会有修改、编辑的需求。 ...
这个zip解压后会有三个文件,除jquery文件,另两个的源码都有。是调用百度地图的api写的一个小工具,对ip地址没有限制的,在web开发中都可以直接调用。js文件是地图的生成。demo实例,可以看出调用。有详细的注释
NULL 博文链接:https://javasam.iteye.com/blog/2054435
实现以下功能: 1、VU3百度地图根据当前IP定位城市 2、VU3百度地图创建自定义MARKER图标 3、VU3百度地图创建自定义窗体信息 4、VU3百度地图单击自定义窗体定位放大跳转到...5、VU3百度地图MARKER图标实现水波纹动画效果
Api接口调用封装,实现POSt,GET等数据请求,Api接口调用封装,实现POSt,GET等数据请求,Api接口调用封装,实现POSt,GET等数据请求,Api接口调用封装,实现POSt,GET等数据请求,Api接口调用封装,实现POSt,GET等数据请求,...
android高德地图封装工具类地图定位,绘制路径等等android高德地图封装工具类地图定位,绘制路径等等android高德地图封装工具类地图定位,绘制路径等等android高德地图封装工具类地图定位,绘制路径等等android高德...