百度地图API应用以及对地图的一些操作

来源：互联网发布：js面向对象和面向过程编辑：程序博客网时间：2024/05/16 07:54

····现在GIS成为每个WEB开发必备的一项技能。在开发过程中，许多时候都要用到地图，当然我是推荐百度地图，他有一套完整的API可供参考，甚至可以直接调用。最近在做的项目恰好做到了对伴读地图的部分开发，当然是在API基础上进行修改和增加一些新的功能。注意：在使用百度地图的时候，要申请秘钥，这样可以直接调用网页的百度地图，但是弊端是必须在联网的状态下才能使用。现在贴出代码如下：

html部分：

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><%String base = request.getContextPath(); %><title>首页</title><link type="text/css" rel="stylesheet" href="assets/css/index.css" /><link type="text/css" rel="stylesheet" href="assets/jedate/skin/jedate.css"><script src="assets/js/jquery.min.js"></script><script src="assets/jedate/jedate.js"></script><script src="assets/js/ggxx.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script></head><body><div class="map ggxxframe"><div class="tstl" style="opacity: 0.8;border-radius:5px; "><ul><li><div><div class="color_div" style="background-color: #00A549"></div><span>畅通</span></div></li><li><div><div class="color_div" style="background-color: #FFA500"></div><span>缓行</span></div></li><li><div><div class="color_div" style="background-color: #FF0109"></div><span>拥挤</span></div></li></ul></div> <div id="baidumap2"></div>

<div class="menu_r"><span style="white-space:pre"></span><ul ><span style="white-space:pre"></span><li class="menu_list"><a href="javascript:;">城市公路</a><span style="white-space:pre"></span><ul class="menu_2" style="display:none;"><span style="white-space:pre"></span><li ><label><input type="checkbox" id="csglw" class="checkbox"><img src="assets/images/icon_csgl.png" >城市公路网</label></li><span style="white-space:pre"></span><li ><label><input type="checkbox" id="cssj" class="checkbox"><img src="assets/images/sj_min.png" >事件</label></li><span style="white-space:pre"></span></ul><span style="white-space:pre"></span></li><span style="white-space:pre"></span><li class="menu_list"><a href="javascript:;">城市公交</a><span style="white-space:pre"></span><ul class="menu_2" style="display:none;"><span style="white-space:pre"></span><li ><label><input type="checkbox" id="gjzd" class="checkbox"><img src="assets/images/icon_gjz.png" >公交站点</label></li><span style="white-space:pre"></span><li ><label><input type="checkbox" id="gjxl" class="checkbox"><img src="assets/images/icon_gjxl.png" >公交线路</label></li><span style="white-space:pre"></span><li ><label><input type="checkbox" id="gjsswz" class="checkbox"><img src="assets/images/icon_gjwz.png" >公交车实时位置</label></li><span style="white-space:pre"></span></ul><span style="white-space:pre"></span></li><span style="white-space:pre"></span><li class="menu_list"><a href="javascript:;">公共停车场</a><span style="white-space:pre"></span><ul class="menu_2" style="display:none;"><span style="white-space:pre"></span><li ><label><input type="checkbox" id="ggtcc" class="checkbox"><img src="assets/images/icon_tcc.png" >公共停车场</label></li><span style="white-space:pre"></span></ul><span style="white-space:pre"></span></li><span style="white-space:pre"></span><li class="menu_list"><a href="javascript:;">高速公路</a><span style="white-space:pre"></span><ul class="menu_2" style="display:none;"><span style="white-space:pre"></span><li ><label><input type="checkbox" id="gsglw" class="checkbox"><img src="assets/images/icon_gsgl.png" >高速公路网</label></li><span style="white-space:pre"></span><li ><label><input type="checkbox" id="gssj" class="checkbox"><img src="assets/images/sj_min.png" >事件</label></li><span style="white-space:pre"></span></ul><span style="white-space:pre"></span></li><span style="white-space:pre"></span><li class="menu_list"><a href="javascript:;">对外交通</a><span style="white-space:pre"></span><ul class="menu_2" style="display:none;"><span style="white-space:pre"></span><li ><label><input type="checkbox" id="ctkyz" class="checkbox"><img src="assets/images/icon_ctz.png" >长途客运站</label></li><span style="white-space:pre"></span><li ><label><input type="checkbox" id="ychcz" class="checkbox"><img src="assets/images/icon_hcz.png" >盐城火车站</label></li><span style="white-space:pre"></span><li ><label><input type="checkbox" id="nyjc" class="checkbox"><img src="assets/images/icon_nyjc.png" >南洋机场</label></li><span style="white-space:pre"></span><li ><label><input type="checkbox" id="ldmt" class="checkbox"><img src="assets/images/icon_ldmt.png" >轮渡码头</label></li><span style="white-space:pre"></span></ul><span style="white-space:pre"></span></li><span style="white-space:pre"></span><li class="menu_list"><a href="javascript:;">公共自行车</a><span style="white-space:pre"></span><ul class="menu_2" style="display:none;"><span style="white-space:pre"></span><li ><label><input type="checkbox" id="ggzxc" class="checkbox"><img src="assets/images/icon_zxc.png" >公共自行车</label></li><span style="white-space:pre"></span><li ><label><input type="checkbox" id="fwzx" class="checkbox"><img src="assets/images/icon_fwzx.png" >服务中心</label></li><span style="white-space:pre"></span></ul><span style="white-space:pre"></span></li><span style="white-space:pre"></span><li class="menu_list"><a href="javascript:;">出租车</a><span style="white-space:pre"></span><ul class="menu_2" style="display:none;"><span style="white-space:pre"></span><li ><label><input type="checkbox" id="czc" class="checkbox"><img src="assets/images/icon_czc.png" >出租车</label></li><span style="white-space:pre"></span><li ><label><input type="checkbox" id="czzt" class="checkbox"><img src="assets/images/icon_czzt.png" >出租车站台</label></li><span style="white-space:pre"></span></ul><span style="white-space:pre"></span></li><span style="white-space:pre"></span><li class="menu_list"><a href="javascript:;">公共交通基础设施</a><span style="white-space:pre"></span><ul class="menu_2" style="display:none;"><span style="white-space:pre"></span><li ><label><input type="checkbox" id="ggss" class="checkbox"><img src="assets/images/icon_ggss.png" >公共交通基础设施</label></li><span style="white-space:pre"></span></ul><span style="white-space:pre"></span></li><span style="white-space:pre"></span></ul></div></body></html>

JS部分（包括右边悬浮框的选中事件的JS）：

<pre name="code" class="javascript">$(document).ready(function(){var $tstl=$("#tstl");var $gjzd=$("#gjzd");var $csglw=$("#csglw");var $cssj=$("#cssj");var $gjsswz=$("#gjsswz");var $ggtcc=$("#ggtcc");var $gjxl=$("#gjxl");var $gsglw=$("#gsglw")var $gssj=$("#gssj");var $ctkyz=$("#ctkyz");var $ychcz=$("#ychcz");var $nyjc=$("#nyjc");var $ldmt=$("#ldmt");var $ggzxc=$("#ggzxc");var $fwzx=$("#fwzx");var $czc=$("#czc");var $czzt=$("#czzt");var $ggss=$("#ggss");var $baidumap2=$("#baidumap2");var markerArr_gjzd=[{x:120.168385,y:33.34657,type:'gjzd'},{x:120.161252,y:33.347083,type:'gjzd'},{x:120.159851,y:33.338955,type:'gjzd'},{x:120.174286,y:33.343064,type:'gjzd'}]var markerArr_cssj=[{x:120.162676,y:33.345539,type:'sj'},{x:120.172575,y:33.341709,type:'sj'},{x:120.163035,y:33.337698,type:'sj'},{x:120.157124,y:33.34462,type:'sj'}]var markerArr_gjsswz=[{x:120.158027,y:33.340116,type:'gjsswz'},{x:120.170711,y:33.343811,type:'gjsswz'},{x:120.168097,y:33.346299,type:'gjsswz'},{x:120.174116,y:33.33983,type:'gjsswz'}]var markerArr_ggtcc=[{x:120.162079,y:33.34185,type:'ggtcc'},{x:120.153581,y:33.339799,type:'ggtcc'},{x:120.158845,y:33.339679,type:'ggtcc'}]var markerArr_gjqdzd=[{x:120.152673,y:33.341926,type:'gjqid'},{x:120.179569,y:33.341594,type:'gjzhongd'}]var markerArr_gssj=[{x:120.102467,y:33.339249,type:'sj'},{x:120.176487,y:33.285001,type:'sj'}]var markerArr_ctkyz=[{x:120.179615,y:33.384016 ,type:'ctkyz'}]var markerArr_ychcz=[{x:120.180641,y:33.38815,type:'ychcz'}]var markerArr_nyjc=[{x:120.215175,y:33.436101,type:'nyjc'}]var markerArr_ldmt=[{x:120.243928,y:33.875143,type:'ldmt'}]var markerArr_ggzxc=[{x:120.137764,y:33.387744,type:'ggzxc'},{x:120.176059,y:33.353883,type:'ggzxc'},{x:120.179344,y:33.33907,type:'ggzxc'}]var markerArr_fwzx=[{x:120.19858,y:33.393021,type:'fwzx'}]var markerArr_czc=[{x:120.156435,y:33.344209,type:'czc'},{x:120.165705,y:33.339353,type:'czc'}]var markerArr_czzt=[{x:120.15708,y:33.344457,type:'czczt'},{x:120.156649,y:33.337641,type:'czczt'}]var markerArr_ggss=[{x:120.158266,y:33.340355,type:'ggss'},{x:120.163009,y:33.337731,type:'ggss'}]//创建markerfunction addMarker2(json){for (var i = 0; i < json.length; i++) {var type=json[i].type;var bh=json[i].bh;var x=json[i].x,y=json[i].y;var point = new BMap.Point(json[i].x,json[i].y);var iconImg = new BMap.Icon("assets/images/"+type+".png", new BMap.Size(40,40),{imageOffset: new BMap.Size(0,0)});        marker= new BMap.Marker(point,{icon:iconImg});        marker.addEventListener("click",function(){        $(".info_").css('visibility','hidden')        if(type=='gjsswz'){        $("#info_gjsswz").css('visibility','visible');        }else if(type=='gjzd'){        $("#info_gjzd").css('visibility','visible');        }else if(type=='sj') {        $("#info_cssj").css('visibility','visible');        }else if(type=='ggtcc'){        $("#info_ggtcc").css('visibility','visible');        }else if(type=='ctkyz'){        $("#info_ctkyz").css('visibility','visible');        }else if(type=="ychcz"){        $("#info_ychcz").css('visibility','visible');        }else if(type=="nyjc"){        $("#info_nyjc").css('visibility','visible');        }else if(type=="ldmt"){        $("#info_ldmt").css('visibility','visible');        }else if(type=="ggzxc"){        $("#info_ggzxc").css('visibility','visible');        }else if(type=="fwzx"){        $("#info_fwzx").css('visibility','visible');        }else if(type=="czc"){        $("#info_czc").css('visibility','visible');        }else if(type=="czczt"){        $("#info_czczt").css('visibility','visible');        }else if(type=="ggss"){        $("#info_ggss").css('visibility','visible');        }    });        map2.addOverlay(marker);}    }$(".checkbox").click(function(){test_check2()})/*$gjzd.click(function(){test_check2();});$csglw.click(function(){test_check2();});$cssj.click(function(){test_check2();});$gjsswz.click(function(){test_check2();});$ggtcc.click(function(){test_check2();});$gjxl.click(function(){test_check2();});*/$(".menu_list>a").click(function() {var t=$(this);$(".menu_2").hide(500)if(t.next().css("display")=="none"){setTimeout(function(){t.next().show(500)},1)}});$baidumap2.css("height",895)initMap2();function initMap2(){    createMap2();//创建地图    setMapEvent2();//设置地图事件    test_check2();}//创建地图函数：function createMap2(){    var map2 = new BMap.Map("baidumap2",{minZoom:12});//在百度地图容器中创建一个地图    var point2 = new BMap.Point(120.162748,33.349098);//定义一个中心点坐标    map2.centerAndZoom(point2,17);//设定地图的中心点和坐标并将地图显示在地图容器中    window.map2 = map2;//将map变量存储在全局}//地图事件设置函数：function setMapEvent2(){    map2.enableScrollWheelZoom();//启用地图滚轮放大缩小    map2.enableKeyboard();//启用键盘上下左右键移动地图}function test_check2(){map2.clearOverlays();if($gjzd.is(":checked")){addMarker2(markerArr_gjzd);}if($cssj.is(":checked")){addMarker2(markerArr_cssj);}if($gjsswz.is(":checked")){addMarker2(markerArr_gjsswz);}if($ggtcc.is(":checked")){addMarker2(markerArr_ggtcc);}if($gssj.is(":checked")){addMarker2(markerArr_gssj);}if($ctkyz.is(":checked")){addMarker2(markerArr_ctkyz);}if($ychcz.is(":checked")){addMarker2(markerArr_ychcz);}if($nyjc.is(":checked")){addMarker2(markerArr_nyjc);}if($ldmt.is(":checked")){addMarker2(markerArr_ldmt);}if($ggzxc.is(":checked")){addMarker2(markerArr_ggzxc);}if($fwzx.is(":checked")){addMarker2(markerArr_fwzx);}if($czc.is(":checked")){addMarker2(markerArr_czc);}if($czzt.is(":checked")){addMarker2(markerArr_czzt);}if($ggss.is(":checked")){addMarker2(markerArr_ggss);}if($gsglw.is(":checked")){drawLine({strokeColor:"#00A549",strokeWeight:6,strokeOpacity:1},newp(120.232578,33.524732),newp(120.242926,33.490053),newp(120.267647,33.432707),newp(120.307891,33.367604),newp(120.313353,33.359523))}if($gjxl.is(":checked")){addMarker2(markerArr_gjqdzd);drawLine({strokeColor:"blue",strokeWeight:6,strokeOpacity:1},newp(120.152673,33.341926),newp(120.155476,33.338668),newp(120.158027,33.340116),newp(120.158027,33.340116),newp(120.163453,33.343419),newp(120.168376,33.34642),newp(120.170711,33.343811),newp(120.171681,33.342665),newp(120.173712,33.343886),newp(120.174161,33.343389),newp(120.17434,33.342785),newp(120.174322,33.341639),newp(120.175903,33.341624),newp(120.175903,33.341624),newp(120.179569,33.341594))}if($csglw.is(":checked")){$(".tstl").css('visibility','visible')drawLine({strokeColor:"#00A549",strokeWeight:3,strokeOpacity:1},newp(120.150275,33.344806),newp(120.155431,33.338729),newp(120.168385,33.34657),newp(120.163192,33.352753),newp(120.15588,33.348139))drawLine({strokeColor:"#00A549",strokeWeight:3,strokeOpacity:1},newp(120.152754,33.341971),newp(120.161306,33.347083),newp(120.164001,33.343947))drawLine({strokeColor:"#00A549",strokeWeight:3,strokeOpacity:1},newp(120.158863,33.349963),newp(120.161252,33.347083),newp(120.165474,33.349843))drawLine({strokeColor:"#FF0109",strokeWeight:3,strokeOpacity:1},newp(120.162662,33.34553),newp(120.167001,33.348056))drawLine({strokeColor:"#FF0109",strokeWeight:3,strokeOpacity:1},newp(120.163121,33.348191),newp(120.165833,33.345062))drawLine({strokeColor:"#00A549",strokeWeight:3,strokeOpacity:1},newp(120.158593,33.340418),newp(120.159851,33.338955),newp(120.161216,33.339724),newp(120.163022,33.337703))drawLine({strokeColor:"#FFA500",strokeWeight:3,strokeOpacity:1},newp(120.162195,33.347581),newp(120.163471,33.34599))drawLine({strokeColor:"#00A549",strokeWeight:3,strokeOpacity:1},newp(120.168376,33.346503),newp(120.176532,33.337047))drawLine({strokeColor:"#FFA500",strokeWeight:3,strokeOpacity:1},newp(120.172939,33.34127),newp(120.17434,33.341677),newp(120.174286,33.343064),newp(120.173712,33.343924),newp(120.171699,33.342778))}else {$(".tstl").css('visibility','hidden')}}//绘制线条function drawLine(style) {var lines = [];if (arguments && arguments.length) {for ( var i = 1; i < arguments.length; i++) {lines.push(arguments[i]);}}if (lines.length == 0) {return;}var polyline = new BMap.Polyline(lines, style);window.map2.addOverlay(polyline);}});function drawLine(style) {var lines = [];if (arguments && arguments.length) {for ( var i = 1; i < arguments.length; i++) {lines.push(arguments[i]);}}//console.log(lines.length);if (lines.length == 0) {return;}var polyline = new BMap.Polyline(lines, style);window.map.addOverlay(polyline);}function newp(x, y) {return new BMap.Point(x, y);}function jctc() {// 青年路drawLine({strokeColor : "#68AF2F",strokeWeight : 2,strokeOpacity : 1}, newp(120.135992, 33.36097), newp(120.157982, 33.371825), newp(120.161719, 33.373875), newp(120.167181, 33.377131), newp(120.179542, 33.385331), newp(120.194633, 33.390516), newp(120.198226, 33.391842), newp(120.217342, 33.403417));// 范公路drawLine({strokeColor : "#68AF2F",strokeWeight : 2,strokeOpacity : 1}, newp(120.225535, 33.325441), newp(120.215088, 33.34288), newp(120.209446, 33.354928), newp(120.200005, 33.36575), newp(120.191507, 33.373302), newp(120.179613, 33.385361), newp(120.173038, 33.397298), newp(120.169229, 33.40408), newp(120.163911, 33.409565), newp(120.155683, 33.42183), newp(120.152161, 33.424783), newp(120.146771, 33.427796), newp(120.133908, 33.435027), newp(120.122553, 33.440932), newp(120.116229, 33.44292), newp(120.103365, 33.453313));// 盐兴路drawLine({strokeColor : "#68AF2F",strokeWeight : 2,strokeOpacity : 1}, newp(120.091499, 33.373366), newp(120.097895, 33.374482), newp(120.100913, 33.375748), newp(120.102422, 33.377267), newp(120.104758, 33.380282), newp(120.105584, 33.380764), newp(120.113525, 33.388832));// 世纪大道drawLine({strokeColor : "#68AF2F",strokeWeight : 2,strokeOpacity : 1}, newp(120.108117, 33.324978), newp(120.110112, 33.325125), newp(120.11331, 33.32609), newp(120.122293, 33.329046), newp(120.136261,33.336406), newp(120.150284, 33.344972));// 城西干道drawLine({strokeColor : "#68AF2F",strokeWeight : 2,strokeOpacity : 1}, newp(120.18256, 33.30648), newp(120.188345, 33.298785), newp(120.197005,33.284269));// 南环路drawLine({strokeColor : "#68AF2F",strokeWeight : 2,strokeOpacity : 1}, newp(120.264413, 33.347777), newp(120.304298, 33.371418));// 青年东路drawLine({strokeColor : "#68AF2F",strokeWeight : 2,strokeOpacity : 1}, newp(120.217342, 33.403914), newp(120.234877, 33.414583), newp(120.246663, 33.420429), newp(120.257083, 33.42519), newp(120.261395, 33.428564), newp(120.263336, 33.432481), newp(120.263264, 33.435735), newp(120.261898, 33.439471), newp(120.259742, 33.443809));// 环路drawLine({strokeColor : "#68AF2F",strokeWeight : 2,strokeOpacity : 1}, newp(120.182632, 33.306631), newp(120.206634, 33.317492), newp(120.234949, 33.329559), newp(120.264247, 33.347777), newp(120.250005, 33.363835), newp(120.241309, 33.374207), newp(120.232182, 33.385301), newp(120.225211, 33.393983), newp(120.208323, 33.414839), newp(120.203724, 33.415984), newp(120.198262, 33.416888), newp(120.191435, 33.421589), newp(120.175912, 33.432617), newp(120.16887, 33.435208), newp(120.160282, 33.434334), newp(120.139585, 33.42421), newp(120.129955, 33.419329), newp(120.121475, 33.413603), newp(120.112205, 33.407094), newp(120.109833, 33.403417), newp(120.109617, 33.394254), newp(120.113516, 33.388858), newp(120.115834, 33.38711), newp(120.118636, 33.384367), newp(120.124206, 33.378186), newp(120.127602, 33.37181), newp(120.1361,33.36094), newp(120.182632, 33.306631));}var BMapLib = window.BMapLib = BMapLib || {};(function() {var AreaRestriction =BMapLib.AreaRestriction = function() {}var _isRestricted = false;var _map = null;var _bounds = null;AreaRestriction.setBounds = function(map, bounds) {if (!map || !bounds || !(bounds instanceof BMap.Bounds)) {throw "请检查传入参数值的合法性";return false;}if (_isRestricted) {this.clearBounds();}_map = map;_bounds = bounds;_map.addEventListener("moveend", this._mapMoveendEvent);_isRestricted = true;return true;};AreaRestriction._mapMoveendEvent = function(e) {if (_bounds.containsBounds(_map.getBounds())) {return;}var curBounds = _map.getBounds(), curBoundsSW = curBounds.getSouthWest(), curBoundsNE = curBounds.getNorthEast(), _boundsSW = _bounds.getSouthWest(), _boundsNE = _bounds.getNorthEast();var boundary = {n : 0,e : 0,s : 0,w : 0};boundary.n = (curBoundsNE.lat < _boundsNE.lat) ? curBoundsNE.lat: _boundsNE.lat;boundary.e = (curBoundsNE.lng < _boundsNE.lng) ? curBoundsNE.lng: _boundsNE.lng;boundary.s = (curBoundsSW.lat < _boundsSW.lat) ? _boundsSW.lat: curBoundsSW.lat;boundary.w = (curBoundsSW.lng < _boundsSW.lng) ? _boundsSW.lng: curBoundsSW.lng;var center = new BMap.Point(boundary.w + (boundary.e - boundary.w) / 2,boundary.s + (boundary.n - boundary.s) / 2);setTimeout(function() {_map.panTo(center, {noAnimation : "no"});}, 1);};AreaRestriction.clearBounds = function() {if (!_isRestricted) {return;}_map.removeEventListener("moveend", this._mapMoveendEvent);_isRestricted = false;};})();

1 0