百度地图api点击事件及鼠标滚动缩放

首先找百度拿到密钥http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey不解释，
把ip和密钥设置好
干货在此：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<link rel="stylesheet"href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<style type="text/css">
html {height: 100%
}body {height: 100%;margin: 0px;padding: 0px
}#container {height: 100%
}
</style>
</head><body><div>状态说明【 <input type="checkbox" value="allstation"onclick="stationchoose(1);" id="station" />所有站点 <inputtype="checkbox" name="stationtype" value="A"onclick="stationchoose(2);" />A类站点 <input type="checkbox"name="stationtype" value="B" onclick="stationchoose(2);" />B类站点 <inputtype="checkbox" name="stationtype" value="C"onclick="stationchoose(2);" />C类站点 <input type="checkbox"name="stationtype" value="D" onclick="stationchoose(2);" />D类站点 】</div><div id="container"></div>
</body>
<script type="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=r8Sf8PxT4oD1liRB0CxpFE3C9FbbFf8M">//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
<script type="text/javascript"src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<script type="text/javascript">var map = new BMap.Map("container");// 创建地图实例  var point = new BMap.Point(119.663056, 29.852344);// 创建点坐标  map.centerAndZoom(point, 12);// 初始化地图，设置中心点坐标和地图级别var geoc = new BMap.Geocoder();    map.addControl(new BMap.NavigationControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.OverviewMapControl());map.addControl(new BMap.MapTypeControl());map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图map.enableKeyboard();//启动键盘操作地图<!--选择站点类型实现全选和分选-->function stationchoose(obj) {var all = document.getElementById("station");var stationtypes = document.getElementsByName("stationtype");var temp = true;if (obj == 1) {//<!--全选，遍历其他勾上checked-->if (all.checked == true) {for (var i = 0; i < stationtypes.length; i++) {stationtypes[i].checked = "checked";}} else {for (var i = 0; i < stationtypes.length; i++) {stationtypes[i].checked = "";}}} else {//<!--不全选，遍历其他，如果全都选了则勾上全选-->for (var i = 0; i < stationtypes.length; i++) {if (stationtypes[i].checked == false) {temp = false;<!--如果有一个没勾则temp = false-->break;}}if (temp) {all.checked = "checked";<!--如果全都选了则勾上全选-->} else {all.checked = "";<!--如果temp = false则不能全选-->}}}//新建乡镇标记var list = new Array();var marker = new Array();var point1 = new BMap.Point(119.545201, 29.902221);var point2 = new BMap.Point(119.452706, 29.933319);var point3 = new BMap.Point(119.620702, 29.848726);var point4 = new BMap.Point(119.692964, 29.785198);var point5 = new BMap.Point(119.364404, 29.854243);list[0] = point1;list[1] = point2;list[2] = point3;list[3] = point4;list[4] = point5;for (var i = 0; i < list.length; i++) {marker[i] = new BMap.Marker(list[i]);// 创建标注map.addOverlay(marker[i]);}//添加点击事件，点击某标记，地图级别变为16,并生成以该标记为中心的地图//获取地名，传到后端查询数据库等等，不展示，不解释map.addEventListener("click", function(e) {var point = new BMap.Point(e.point.lng, e.point.lat);map.centerAndZoom(point, 16);//(e.point.lng + ", " + e.point.lat)地图坐标//("地图缩放至：" + this.getZoom() + "级")地图缩放级别});
</script>
</html>

个人邮箱：banxian1804@qq.com

百度地图api点击事件及鼠标滚动缩放相关推荐

百度地图api 点击标注后跳转页面
百度地图api 点击标注跳转页面初始化地图 window.onload = function(){//得到所有点,包括点的id.经纬度.跳转地址链接//jd. wd.hrefgetPoints(); ...
百度地图 app 点击事件无效、不触发解决方案
百度地图 app 点击事件无效.不触发解决方案参考文章: (1)百度地图 app 点击事件无效.不触发解决方案 (2)https://www.cnblogs.com/muzhe/articles ...
利用百度地图API进行车辆查询并用鼠标拾点获取经纬度
利用百度地图API查询公交车线路位置信息以及鼠标取点的经纬度先从官网申请秘钥http://lbsyun.baidu.com/ 2. 如果是用jsp写动态web项目,在jsp页面中引入js库,并且引入 ...
centerandzoom 无效_百度地图 app 点击事件无效、不触发解决方案
参考 https://blog.csdn.net/Davis_Dxs/article/details/82425211 具体问题: 对 "地图" 添加 click 事件,在点击地图 ...
android百度地图的点击事件监听,百度地图监听事件addEventListener无效
我这到底是什么问题啊,能打开,能定位,能设置中心,就是监听事件不起作用加了setTimeout就会闪退,求帮助,急急急,很急 var winHeight,map,lat='39.989539',lon ...
百度地图 polygon点击事件_中国地图的画法
中国地图的画法昨天,我们的小编推送了世界地图的画法(生信小白7行代码画一个高颜值的世界地图),今天我们来说一说中国地图的画法. 首先要强调一点,很多来自国外的地图数据中中国的版图有不少错误,千万要注 ...
百度地图API 2014年 v3.0.0版本缩放控件、比例尺控件、指南针控件【控制方法】
// 隐藏缩放控件 int childCount = mMapView.getChildCount(); View zoom = null; for (int i = 0; i < childC ...
百度地图API（三）电子围栏—地图点击事件创建多边形
百度地图API(四)电子围栏-DrawingManager 分析电子围栏:顾名思义就是一个多边形,然后终端或者其他什么东西在这个围栏中,如果离开围栏则通知离开了围栏,而做这个电子围栏应该就是鼠标点击 ...
百度地图API自定义点路书，路书点击事件，路书速度动态改变
前一段时间研究百度地图路书,查了很多资料也看源码,总结了一下如下代码中有三个图片我放在下面,自行下载重命名和代码里面的名字保持一致,并且同代码放在同一个目录里面,代码中注释也很详细,可自行copy ...

百度地图api点击事件及鼠标滚动缩放

百度地图api点击事件及鼠标滚动缩放相关推荐

最新文章

热门文章