1:引入js库
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
2:现在jsp中设置地图div
<div style="width:793px;height:407px;border:#ccc solid 1px;" id="dituContent"></div>
</div>
</div>
</div>
3:调用地图js库
<script type="text/javascript"> //创建和初始化地图函数: function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMarker();//向地图中添加marker } //创建地图函数: function createMap(){ var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图 var point = new BMap.Point(121.542500,31.218505);//定义一个中心点坐标 map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map;//将map变量存储在全局 } //地图事件设置函数: function setMapEvent(){ map.enableDragging();//启用地图拖拽事件,默认启用(可不写) map.enableScrollWheelZoom();//启用地图滚轮放大缩小 map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写) map.enableKeyboard();//启用键盘上下左右键移动地图 } //地图控件添加函数: function addMapControl(){ //向地图中添加缩放控件 var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(ctrl_nav); //向地图中添加缩略图控件 var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); map.addControl(ctrl_ove); //向地图中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); map.addControl(ctrl_sca); } //标注点数组 var markerArr = [{title:"嘻嘻哈哈投资管理有限公司",content:"嘻嘻哈哈投资管理有限公司",point:"121.542500|31.218505",isOpen:1,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}} ]; //创建marker function addMarker(){ for(var i=0;i<markerArr.length;i++){ var json = markerArr[i]; var p0 = json.point.split("|")[0]; var p1 = json.point.split("|")[1]; var point = new BMap.Point(p0,p1); var iconImg = createIcon(json.icon); var marker = new BMap.Marker(point,{icon:iconImg}); var iw = createInfoWindow(i); var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)}); marker.setLabel(label); map.addOverlay(marker); label.setStyle({ borderColor:"#808080", color:"#333", cursor:"pointer" }); (function(){ var index = i; var _iw = createInfoWindow(i); var _marker = marker; _marker.addEventListener("click",function(){ this.openInfoWindow(_iw); }); _iw.addEventListener("open",function(){ _marker.getLabel().hide(); }) _iw.addEventListener("close",function(){ _marker.getLabel().show(); }) label.addEventListener("click",function(){ _marker.openInfoWindow(_iw); }) if(!!json.isOpen){ label.hide(); _marker.openInfoWindow(_iw); } })() } } //创建InfoWindow function createInfoWindow(i){ var json = markerArr[i]; var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>"); return iw; } //创建一个Icon function createIcon(json){ var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)}) return icon; } initMap();//创建和初始化地图 </script>
效果图如附件
相关推荐
调用google地图事例,jsp,java
用户通过网页登录的方式在客户端软件上进行登录系统,在登录完成后会根据用户权限的不同进行匹配该权限下所对应监控的车辆,在网页界面上显示这些车辆的各类数据信息,同时调用百度地图在网页上实时跟踪经纬度坐标...
网页及手机版百度地图api调用,多个商家同时标注在一个地图中。此代码可以在html\php\net\jsp等其他动态页面调用,调用方式简单,直接把页面拷贝到项目下即可。其中里面var data_info = [...]需要自己标注想要标注的...
调用百度地图API 实现通过城市名设置地图中心点 更方便用户使用
在bike list, jsp文件中,利用百度地图提供的Map View 类加载地图控件,并设 置地图的长度和宽度与父容器致。通过设置其属性参数保证该地图可被点击和聚焦。之后,通过调用普通地图BMap,最后打开定位图层并更新显示...
百度地图毕业设计源码 作业管理系统 基于B/S开发模式,院校或单位学生交作业、老师批改作业的信息化学期期末设计并获得优秀课程案例。学到了EasyUI jQuery前台优化技术,TOMCAT、云服务器的配置,Ajax、域名解析等...
百度地图毕业设计源码 InnAliance 作品名称:基于SSH & GIS的客栈联盟的设计与实现 (个人毕业设计) 作 者:杨志 指导老师:王昕 所属院校:云南师范大学文理学院 信息工程学院 随着Internet信息技术的飞速发展,...
用的是百度的JS版API,由于百度API未提供截屏功能,便自己动手写,用网页调用APPLET方式实现。附代码,提供JSP和HTML两个版本。亲测可用,觉得有用的请顶! PS: 1、保证D盘有个img目录或者自己修改代码自动创建...
Spring boot+mybatis+spring mvc+bootstrap开发停车位管理系统(调用百度地图API) Spring boot课程评价系统(含项目说明) Springboot+JPA+Thymeleaf 校园博客完整小网站(含项目设计说明) Springboot+layui+mybatis...
2015/4/10 星期五 android案例与项目-百度地图 2015/4/11 星期六 android案例与项目-android源码级分析 2015/4/12 星期日 项目管理与项目实施 2015/4/13 星期一 2015/4/14 星期二 android项目实战-手机影音 2015/4/...
百度云盘分享 简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,对...
低清版51M 大型门户网站是这样炼成的!(Struts 2+Spring 2+Hibernate 3).pdf(完整版) 网上有高清版350M的。... 请于下载后 24H 内及时删除!请抱着学习的态度下载此资料。...13.4.10 百度指数查询 814 13.4.11 ...
强大的网站地图可以方便的生成google,百度,rss,有利于搜索引擎的快速收录,在最短的时间提升贵站的流量! 10.网页生成系统 网站运营模式可以在后台一键切换(PHP动态/HTML静态2中目录结构),一键生成当**数据、一键...