最近要做一个百度地图的拉框效果,仔细一查,百度地图竟然已经封装好了,兴奋了一下,问题来了,百度实现的是拉框搜索,而我要做的却不是这样的功能,唉,又看不懂百度的源码,只好发挥一下自己的聪明才智自己封装一下。
拉框.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>
相关推荐
功能说明: 环境说明: 开发软件:VS 2017 (版本2017以上即可,不能低于2017) 数据库:SqlServer2008r2(数据库版本无限制,都可以导入) 开发模式:mvc。。。
labview程序代码参考学习使用,希望对你有所帮助。
大米外贸商城系统 简称damishop 完全开源版,只需做一种语言一键开启全球133中语言自动翻译功能,价格实现自动汇率转换,集成微信支付宝 paypal以及国外主流支付方式,自带文章博客系统。 软件架构 基于MVC+语言包模式,增加控制台,API导入产品方便对接其他系统(带json示例数据)。 使用要求 PHP7.4+ MYSQL5.6+ REDIS(可选) 安装方法 composer install 打开安装向导安装 http://您的域名/install 特色 1、缓存层增加时间与批量like删除 2、API产品导入方便对接其他系统 3、增加控制台命令行,命令行生成语言翻译包 4、后台一键开启自动翻译模式,支持全球133中语言,由于google代理翻译需要收费,这个功能需要付费。 5、可选购物车与ajax修改购物车产品 6、一键结算checkout 7、增加网站前台自定义路由 方便seo 更新日志 v3.9.7 集成鱼码支付接口,方便个人站长即使收款到账使用 v3.9.3 更新内容 1:增加ueditor与旧编辑器切换 2:增加可视化布局插
labview程序代码参考学习使用,希望对你有所帮助。
labview程序代码参考学习使用,希望对你有所帮助。
毕设和企业适用springboot人工智能客服系统类及旅游规划平台源码+论文+视频