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

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

拉框.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" οnclick="openbut()" value="开启"/>
<input type="button" οnclick="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>

百度地图封装实现拉框效果相关推荐

调用百度地图地址下拉搜索栏爬坑
调用百度地图地址下拉搜索栏爬坑问题描述在项目编写的过程中,我将调用百度API的部分封装成了一个组件,以便后续的调用.在组件的各项显示中,都能顺利显示,并且调用.但,我将组件调用后,发现,搜索提示栏 ...
级联下拉框效果，动态加载图片
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...
1 <script> 2 export default { 3 props: ["lists"], 4 data() { 5 return { 6 isactive: ...
php下拉框选中效果,jquery模拟select下拉框效果
最近开发一网站的过程中碰到个需求,没有使用传统的select下拉框,而是使用了现代比较美观的一些元素设计了一个下拉框.对于这种东东,第一反应就是使用jquery来模拟了,还好,网上找了下,很快就找到了 ...
百度地图api实现轨迹运动效果
百度地图api实现轨迹运动效果实现逻辑: 实现轨迹运动的效果无非就是将一段路程细化为很多个点,然后不过的根据这些点来画出移动轨迹. 实现流程: 1)使用DrivingRoute,根据起点和终点的位置 ...
百度地图自定义吹出框
2019独角兽企业重金招聘Python工程师标准>>> 百度地图自定义吹出框直入正题吧! 这些都是知道的了,看文档添加就行了! 实现三个代理方法: 这个方法类似tableview添 ...
地图选点 php,百度地图选点–Bootstrap模态框(Modal)插件
在网站的开发过程中,例如商家的注册等,需要商家设定自己的经纬度进行对商家的精确定位,同时也方便用户查找到附近距离范围内的商家.这样更利于网站的用户和商家互动.商家设定自己的经纬度就需要使用到百度地图2 ...
野田SEO工具箱：集文章伪原创、百度网址URL下拉框采集、指数、权重、收录批量查询功能
做SEO的人多少会用到各种查询工具, 今天小编就来分享一些SEO常用工具包: 1.网址批量采集: 多线程换IP一分钟采集3000条,速度超快[突破百度验证码] 实测效率: 电脑配置(四核8G,win1 ...
百度地图绘制地区的棱柱效果-定位-自定义点-文本标记-信息弹窗
文章目录百度地图webgl使用自定义地图样式地区镂面棱柱效果绘制点信息以及信息弹窗百度地图webgl使用在项目的index.html中引入 <script type="te ...
诺诺SEO软件包：集文章伪原创、百度网址URL下拉框采集、指数、权重、收录批量查询功能
做SEO的人多少会用到各种查询工具, 今天小编就来分享一些SEO常用工具包: 1.网址批量采集: 多线程换IP一分钟采集3000条,速度超快[突破百度验证码] 实测效率: 电脑配置(四核8G,win1 ...

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

百度地图封装实现拉框效果相关推荐

最新文章

热门文章