百度地图插件

最近碰到需要使用百度地图,可是不是很会哎,怎么办..  没办法,无奈之下只有找度娘,偶然间发现一个比较不错的地图插件,现在分享给大家,需要的复制过去使用,使用地图前,请先连上网络..

使用地图之前,需要一个百度地图的插件,下面将插件的内容  发给大家:

//先要加载接口，要在函数外，保证先加载document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A739765f9a84bee561d30fa0b537ccb9"></script>');document.write('<script charset=utf-8 type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>');document.write('<link charset=utf-8 rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />');var bdMapDestination; //全局终点位置//显示地图//参数：显示容器ID，属性(city,addr,title,lawfirm,tel,user,mapx,pic,ismove,piobj,zoom)function ShowMap(objname,options){<span style="white-space:pre"></span>if(options){<span style="white-space:pre"></span>this._city = options.city ? options.city : ""; //城市<span style="white-space:pre"></span>this._addr = options.addr ? options.addr : ""; //地址<span style="white-space:pre"></span>this._title = options.title ? options.title : ""; //信息窗口标题<span style="white-space:pre"></span>this._lawfirm = options.lawfirm ? options.lawfirm : ""; //律所<span style="white-space:pre"></span>this._tel = options.tel ? options.tel : ""; //电话<span style="white-space:pre"></span>this._user = options.user ? options.user : ""; //主任<span style="white-space:pre"></span>this._mapx = options.mapx ? options.mapx : ""; //地图坐标<span style="white-space:pre"></span>this._pic = options.pic ? options.pic : ""; //图片<span style="white-space:pre"></span>this._ismove = options.ismove ? options.ismove : "0"; //是否拖动，1为拖动为设置标注，0为显示。默认0<span style="white-space:pre"></span>this._piobj = options.piobj ? options.piobj : ""; //接收拖动坐标的表单ID<span style="white-space:pre"></span>this._zoom = options.zoom ? options.zoom : "14"; //放大级别，默认14<span style="white-space:pre"></span>}<span style="white-space:pre"></span>//设定初始坐标<span style="white-space:pre"></span>var point=new BMap.Point(113.63156,34.83794);<span style="white-space:pre"></span>//范围为3-18级<span style="white-space:pre"></span>var zoom=parseInt(this._zoom); //要转为数字<span style="white-space:pre"></span>//创建地图<span style="white-space:pre"></span>var map = new BMap.Map(objname);<span style="white-space:pre"></span>map.enableScrollWheelZoom();<span style="white-space:pre"></span>map.centerAndZoom(point, zoom);//设初始化地图。<span style="white-space:pre"></span>//向地图中添加缩略图控件<span style="white-space:pre"></span>var ctrlOve = new BMap.OverviewMapControl({<span style="white-space:pre"></span>anchor: BMAP_ANCHOR_BOTTOM_RIGHT,<span style="white-space:pre"></span>isOpen: 1<span style="white-space:pre"></span>});<span style="white-space:pre"></span>map.addControl(ctrlOve);<span style="white-space:pre"></span>//设置版权控件位置<span style="white-space:pre"></span>var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_LEFT});<span style="white-space:pre"></span>map.addControl(cr); //添加版权控件<span style="white-space:pre"></span>var bs = map.getBounds(); //返回地图可视区域<span style="white-space:pre"></span>cr.addCopyright({id: 1, content: "<a href='http://blog.csdn.net/love_xiolan/article/details/52711874' style='font-size:12px;'>全屏动画背景</a>", bounds: bs});<span style="white-space:pre"></span>//坐标不为空时按坐标显示<span style="white-space:pre"></span>if (this._mapx != ""){<span style="white-space:pre"></span>var mx=this._mapx.substr(0,this._mapx.indexOf(","));<span style="white-space:pre"></span>var my=this._mapx.substr(this._mapx.indexOf(",")+1);<span style="white-space:pre"></span>point=new BMap.Point(mx,my);<span style="white-space:pre"></span>map.centerAndZoom(point, zoom); //重新调整位置<span style="white-space:pre"></span>}<span style="white-space:pre"></span>//否则按地址显示<span style="white-space:pre"></span>else if (this._addr != ""){<span style="white-space:pre"></span>//创建地址解析器实例   <span style="white-space:pre"></span>var myGeo = new BMap.Geocoder();    <span style="white-space:pre"></span>//将地址解析结果显示在地图上，并调整地图视野。此过程为异步，所以要重设标注 <span style="white-space:pre"></span>myGeo.getPoint(this._addr, function(poi){<span style="white-space:pre"></span>map.centerAndZoom(poi, zoom);<span style="white-space:pre"></span>marker.setPosition(poi); //重调标注位置<span style="white-space:pre"></span>//重设公交查询终点<span style="white-space:pre"></span>bdMapDestination="latlng:"+marker.getPosition().lat+","+marker.getPosition().lng+"|name:"+this._lawfirm;<span style="white-space:pre"></span>}, this._city);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>//否则按城市显示<span style="white-space:pre"></span>else if (this._city != ""){<span style="white-space:pre"></span>map.setCenter(this._city); //设置地图中心点。<span style="white-space:pre"></span>//此定位无具体坐标，所以显示模式时要清除标注。要延时处理<span style="white-space:pre"></span>if (this._ismove=="0"){setTimeout(function(){map.clearOverlays();}, 1000);}<span style="white-space:pre"></span>}<span style="white-space:pre"></span>//都为空按IP定位<span style="white-space:pre"></span>else{<span style="white-space:pre"></span>//创建一个获取本地城市位置的实例<span style="white-space:pre"></span>var myCity = new BMap.LocalCity();<span style="white-space:pre"></span>//获取城市<span style="white-space:pre"></span>myCity.get(function(result){map.setCenter(result.name);});<span style="white-space:pre"></span>if (this._ismove=="0"){setTimeout(function(){map.clearOverlays();}, 1000);}<span style="white-space:pre"></span>}<span style="white-space:pre"></span>//创建标注<span style="white-space:pre"></span>var marker = new BMap.Marker(point);<span style="white-space:pre"></span>map.addOverlay(marker); // 将标注添加到地图中<span style="white-space:pre"></span><span style="white-space:pre"></span>//设置标注时<span style="white-space:pre"></span>if (this._ismove=="1"){<span style="white-space:pre"></span>marker.enableDragging(); //可拖拽<span style="white-space:pre"></span>var label = new BMap.Label("拖拽到您的位置",{offset:new BMap.Size(20,-15)});<span style="white-space:pre"></span>label.setStyle({ backgroundColor:"red", color:"white", fontSize : "12px" });<span style="white-space:pre"></span>marker.setLabel(label);<span style="white-space:pre"></span>var poj=this._piobj; //过程里不支持this，要传给变量<span style="white-space:pre"></span><span style="white-space:pre"></span>//拖拽设置位置<span style="white-space:pre"></span>marker.addEventListener("dragend", function(e){<span style="white-space:pre"></span>try{document.getElementById(poj).value = e.point.lng + "," + e.point.lat;}catch (ex) {}<span style="white-space:pre"></span>});<span style="white-space:pre"></span>//点击设置位置<span style="white-space:pre"></span>map.addEventListener("click", function(e){<span style="white-space:pre"></span>marker.setPosition(e.point); //重调标注位置<span style="white-space:pre"></span>try{document.getElementById(poj).value = e.point.lng + "," + e.point.lat;}catch (ex) {}<span style="white-space:pre"></span>});<span style="white-space:pre"></span>}<span style="white-space:pre"></span>//显示标注时<span style="white-space:pre"></span>if (this._ismove=="0"){<span style="white-space:pre"></span>//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画<span style="white-space:pre"></span>bdMapDestination="latlng:"+marker.getPosition().lat+","+marker.getPosition().lng+"|name:"+this._lawfirm;<span style="white-space:pre"></span><span style="white-space:pre"></span>//显示窗口设置<span style="white-space:pre"></span>//var opts = {width:250,height:130,title : "<font color=green size=3>" + this._title + "</font>"} //窗口标题<span style="white-space:pre"></span>//var infotxt="<table border='0'><tr><td valign='top'>"; //窗口内容<span style="white-space:pre"></span>//if (this._pic != ""){infotxt += "<img src='"+this._pic+"' id='picid' style='padding-right:5px;' width=50>";}<span style="white-space:pre"></span>//infotxt += "</td><td style='font-size:12px;line-height:16px;'>";<span style="white-space:pre"></span>//if (this._lawfirm !=""){infotxt += "<b>律所：</b>" + this._lawfirm + "<br/>";};<span style="white-space:pre"></span>//if (this._addr !=""){infotxt += "<b>地址：</b>" + this._addr + "<br/>";};<span style="white-space:pre"></span>//if (this._tel !=""){infotxt += "<b>电话：</b>" + this._tel + "<br/>";};<span style="white-space:pre"></span>//if (this._user !=""){infotxt += "<b>主任：</b>" + this._user + "<br/>";};<span style="white-space:pre"></span>//infotxt += "</td></tr>";<span style="white-space:pre"></span>//infotxt += "<tr><td colspan='2' style='font-size:12px;'>起点：<input type='text' name='region' id='region' style='border:1px #cccccc solid;width:100px;'><input type='hidden' value='"+this._city+"' id='city'> <input type='button' value='公交' onclick='gotobaidu(1)' style='border:1px #cccccc solid;background:#F8F8F8;'/> <input type='button' value='驾车' onclick='gotobaidu(2)' style='border:1px #cccccc solid;background:#F8F8F8;'/></td></tr>";<span style="white-space:pre"></span>//infotxt += "</table>";<span style="white-space:pre"></span>//显示文本标题<span style="white-space:pre"></span>var label2 = new BMap.Label(this._title,{offset:new BMap.Size(20,-15)});<span style="white-space:pre"></span>label2.setStyle({ backgroundColor:"red", color:"white", fontSize : "12px" });<span style="white-space:pre"></span>marker.setLabel(label2);<span style="white-space:pre"></span><span style="white-space:pre"></span>//searchInfoWindow显示内容<span style="white-space:pre"></span>var content = '<div style="margin:0;line-height:20px;padding:2px;">';<span style="white-space:pre"></span>if (this._pic != ""){ content += '<img src="' + this._pic + '"style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>'; }<span style="white-space:pre"></span>if (this._addr != ""){ content += "地址：" + this._addr + "<br/>"; }<span style="white-space:pre"></span>if (this._tel != ""){ content += "电话：" + this._tel + "<br/>"; }<span style="white-space:pre"></span>if (this._user != ""){ content += "姓名：" + this._user + "<br/>"; }<span style="white-space:pre"></span>if (this._lawfirm !=""){ content += "简介：" + this._lawfirm; }<span style="white-space:pre"></span>content += "</div>";<span style="white-space:pre"></span>//创建检索信息窗口对象<span style="white-space:pre"></span>var searchInfoWindow = null;<span style="white-space:pre"></span>searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {<span style="white-space:pre"></span>title  : this._title,      //标题<span style="white-space:pre"></span>width  : 290,             //宽度<span style="white-space:pre"></span>//height : 100,              //高度。去掉为自动<span style="white-space:pre"></span>panel  : "panel",         //检索结果面板<span style="white-space:pre"></span>enableAutoPan : true,     //自动平移<span style="white-space:pre"></span>searchTypes   :[<span style="white-space:pre"></span>BMAPLIB_TAB_SEARCH,   //周边检索<span style="white-space:pre"></span>BMAPLIB_TAB_TO_HERE,  //到这里去<span style="white-space:pre"></span>BMAPLIB_TAB_FROM_HERE //从这里出发<span style="white-space:pre"></span>]<span style="white-space:pre"></span>});<span style="white-space:pre"></span>//创建信息窗口。改用searchInfoWindow显示<span style="white-space:pre"></span>//var infoWindow = new BMap.InfoWindow(infotxt,opts);<span style="white-space:pre"></span>marker.addEventListener("mouseover", function(){<span style="white-space:pre"></span>searchInfoWindow.open(marker);<span style="white-space:pre"></span>//<span style="white-space:pre"></span>this.openInfoWindow(infoWindow);<span style="white-space:pre"></span>//图片加载完毕重绘infowindow。防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏<span style="white-space:pre"></span>//<span style="white-space:pre"></span>document.getElementById('picid').onload = function (){infoWindow.redraw();}<span style="white-space:pre"></span>});<span style="white-space:pre"></span>}}//公交查询function gotobaidu(k){<span style="white-space:pre"></span>var qd=document.getElementById("region");<span style="white-space:pre"></span>var zd=bdMapDestination;<span style="white-space:pre"></span>var ct=document.getElementById("city").value;<span style="white-space:pre"></span>if (qd.value==""){<span style="white-space:pre"></span>alert("请输入起点");<span style="white-space:pre"></span>qd.focus();<span style="white-space:pre"></span>return false;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>if(ct==""){ct="郑州"};<span style="white-space:pre"></span>var mode=(k=="1"?"transit":"driving");<span style="white-space:pre"></span>var url="http://api.map.baidu.com/direction?output=html&mode="+mode+"&region="+ct+"&origin="+qd.value+"&destination="+zd+"&src=88148|88148.com";<span style="white-space:pre"></span>window.open(url);}//获取地理位置,间隔符//百度查询接口为异步，所以这里要用异步回调方式function getBDAddress(callBackFun,spStr){<span style="white-space:pre"></span>if (!spStr){spStr="";} //分隔符，默认空<span style="white-space:pre"></span>var geolocation = new BMap.Geolocation();<span style="white-space:pre"></span>geolocation.getCurrentPosition(function(r){<span style="white-space:pre"></span>if(this.getStatus() == BMAP_STATUS_SUCCESS){<span style="white-space:pre"></span>var point = new BMap.Point(r.point.lng,r.point.lat);<span style="white-space:pre"></span>var gc = new BMap.Geocoder();    <span style="white-space:pre"></span>gc.getLocation(point, function(rs){<span style="white-space:pre"></span>var addComp = rs.addressComponents;<span style="white-space:pre"></span>var addVal = addComp.province + spStr + addComp.city + spStr + addComp.district + spStr + addComp.street + spStr + addComp.streetNumber;<span style="white-space:pre"></span>callBackFun(addVal);<span style="white-space:pre"></span>});<span style="white-space:pre"></span>}<span style="white-space:pre"></span>},{enableHighAccuracy: true})}

有了这个百度地图的js插件后,在页面只需要引入这个插件就行了,下面是html页面的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script type="text/javascript" src="bdMap.js"></script><body>标注模式<div id="map2" style="height:300px;width:400px;border:1px solid #bcbcbc;"></div><script type="text/javascript">ShowMap("map2",{city:'郑州',addr:'经三路鑫苑路',title:'吊儿',lawfirm:'XXX公司',tel:'1362380952x',mapx:'',pic:'http://www.shalisoft.com/images/100.jpg',ismove:'1',piobj:'nxp'});</script>新坐标<input id="nxp" type="text"><br/><br/>按地址显示<div id="map" style="height:300px;width:400px;border:1px solid #bcbcbc;"></div><script type="text/javascript">ShowMap("map",{city:'郑州',addr:'经三路鑫苑路',title:'吊儿',lawfirm:'XXX公司',tel:'1362380952x',mapx:'',pic:'http://www.shalisoft.com/images/100.jpg',ismove:'0',piobj:'nxp'});</script><br/><br/>按坐标mapx显示<div id="map3" style="height:300px;width:400px;border:1px solid #bcbcbc;"></div><script type="text/javascript">ShowMap("map3",{title:'吊儿',lawfirm:'XXX公司',tel:'1362380952x',mapx:'113.63156,34.83794',pic:'http://www.shalisoft.com/images/100.jpg',ismove:'0',piobj:'nxp'});</script><br/><br/>按城市显示<div id="map4" style="height:300px;width:400px;border:1px solid #bcbcbc;"></div><script type="text/javascript">ShowMap("map4",{city:'郑州金水区',title:'吊儿',lawfirm:'XXX公司',tel:'1362380952x',pic:'http://www.shalisoft.com/images/100.jpg',ismove:'0',piobj:'nxp'});</script><br/><br/>按IP定位显示<div id="map5" style="height:300px;width:400px;border:1px solid #bcbcbc;"></div><script type="text/javascript">ShowMap("map5",{title:'吊儿',lawfirm:'XXX公司',tel:'1362380952x',pic:'http://www.shalisoft.com/images/100.jpg',ismove:'0',piobj:'nxp'});</script><br/><br/>使用说明：<br/>1、 在head引用bdMap.js<br/>2、 设置DIV容器<div id="map" style="height:400px;width:600px;border:1px solid #bcbcbc;"></div><br/>3、 JS执行ShowMap("map",{city:'郑州',addr:'经三路鑫苑路',title:'吊儿',lawfirm:'XXX公司',tel:'1362380952x',pic:'http://www.shalisoft.com/images/100.jpg',ismove:'0'});<br/><br/>ShowMap参数说明：<br/>  objname: DIV容器名称。<br/>  options: 属性定义。说明如下：<br/>      city: 默认定位的城市<br/>      addr: 标注地址。<br/>      title: 窗口标题<br/>      lawfirm: 公司名称<br/>      tel: 联系电话<br/>      user: 主任，（可以在bdMap里自定义自己的显示名字）<br/>      mapx: 标注地图的地址<br/>      pic: 显示照片<br/>      ismove: 是否可以拖动标注点（设置标注时会用的着）<br/>      piobj: 接收拖动坐标的表单ID（设置标注时用于接受拖动后的坐标）<br/>      zoom: 地图放大等级 默认14<br/><br/><font color=red>注意：</font>标注坐标显示的先后顺序：先按mapx ，mapx为空时按addr，addr为空时按city，city为空时按IP定位<br/><br/>getBDAddress 根据浏览器获取地址：(需要浏览器支持html5)<br/>  callBackFun: 获取回调函数<br/>  spStr: 返回信息的分隔符，默认空。可以设置为,号。返回格式：省,市,区,街,门牌<br/><script>function setAdd(v){document.getElementById("show").innerHTML = v;}getBDAddress(setAdd);</script>演示：<span id="show"></span><br/><br/>2014年5月21日 增加公交查询功能。<br/>2016年2月29日 改显示窗体为SearchInfoWindow。<p align="center"><a href="http://www.shalisoft.com" title="访问沙里软件">沙里软件</a> http://www.ShaliSoft.com</p></body></html>

效果图如下:

标注模式:

按地址显示:

按坐标mapx显示:

默默说一句:这个图片上面的人,不是本人,谢谢!

按城市显示:

按IP定位显示:

代码下载地址:http://download.csdn.net/detail/love_xiolan/9648851

来源:http://www.ShaliSoft.com