百度地图插件 - Love丶兰的博客 - CSDN博客
百度地图插件
百度地图插件
最近碰到需要使用百度地图,可是不是很会哎,怎么办.. &没办法,无奈之下只有找度娘,偶然间发现一个比较不错的地图插件,现在分享给大家,需要的复制过去使用,使用地图前,请先连上网络..
使用地图之前,需要一个百度地图的插件,下面将插件的内容 &发给大家:
//先要加载接口，要在函数外，保证先加载
document.write('&script type=&text/javascript& src=&http://api./api?v=2.0&ak=Aa84bee561d30fa0b537ccb9&&&/script&');
document.write('&script charset=utf-8 type=&text/javascript& src=&http://api./library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js&&&/script&');
document.write('&link charset=utf-8 rel=&stylesheet& href=&http://api./library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css& /&');
var bdMapD //全局终点位置
//显示地图
//参数：显示容器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.94);
&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/; style='font-size:12'&全屏动画背景&/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._
&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._ //过程里不支持this，要传给变量
&span style=&white-space:pre&&
&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.}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.}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._
&span style=&white-space:pre&&
&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:5' width=50&&;}
&span style=&white-space:pre&&
&/span&//infotxt += &&/td&&td style='font-size:12line-height:16'&&;
&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:12'&起点：&input type='text' name='region' id='region' style='border:1px #width:100'&&input type='hidden' value='&+this._city+&' id='city'& &input type='button' value='公交' onclick='gotobaidu(1)' style='border:1px #background:#F8F8F8;'/& &input type='button' value='驾车' onclick='gotobaidu(2)' style='border:1px #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 style=&white-space:pre&&
&/span&//searchInfoWindow显示内容
&span style=&white-space:pre&&
&/span&var content = '&div style=&margin:0;line-height:20padding:2&&';
&span style=&white-space:pre&&
&/span&if (this._pic != &&){ content += '&img src=&' + this._pic + '&style=&float:zoom:1;overflow:width:100height:100margin-left:3&/&'; }
&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._ }
&span style=&white-space:pre&&
&/span&content += &&/div&&;
&span style=&white-space:pre&&
&/span&//创建检索信息窗口对象
&span style=&white-space:pre&&
&/span&var searchInfoWindow =
&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 style=&white-space:pre&&
&/span&});
&span style=&white-space:pre&&
&/span&//创建信息窗口。改用searchInfoWindow显示
&span style=&white-space:pre&&
&/span&//var infoWindow = Window(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=bdMapD
&span style=&white-space:pre&& &/span&var ct=document.getElementById(&city&).
&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 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./direction?output=html&mode=&+mode+&&region=&+ct+&&origin=&+qd.value+&&destination=&+zd+&&src=&;
&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.addressC
&span style=&white-space:pre&&
&/span&var addVal = addComp.province + spStr + addComp.city + spStr + addComp.district + spStr + addComp.street + spStr + addComp.streetN
&span style=&white-space:pre&&
&/span&callBackFun(addVal);
&span style=&white-space:pre&&
&/span&});
&span style=&white-space:pre&&
&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&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312&&
&script type=&text/javascript& src=&bdMap.js&&&/script&
&div id=&map2& style=&height:300width:400border:1px solid #&&&/div&
&script type=&text/javascript&&ShowMap(&map2&,{city:'郑州',addr:'经三路鑫苑路',title:'吊儿',lawfirm:'XXX公司',tel:'x',mapx:'',pic:'/images/100.jpg',ismove:'1',piobj:'nxp'});&/script&
新坐标&input id=&nxp& type=&text&&
&br/&&br/&
按地址显示
&div id=&map& style=&height:300width:400border:1px solid #&&&/div&
&script type=&text/javascript&&ShowMap(&map&,{city:'郑州',addr:'经三路鑫苑路',title:'吊儿',lawfirm:'XXX公司',tel:'x',mapx:'',pic:'/images/100.jpg',ismove:'0',piobj:'nxp'});&/script&
&br/&&br/&
按坐标mapx显示
&div id=&map3& style=&height:300width:400border:1px solid #&&&/div&
&script type=&text/javascript&&ShowMap(&map3&,{title:'吊儿',lawfirm:'XXX公司',tel:'x',mapx:'113.94',pic:'/images/100.jpg',ismove:'0',piobj:'nxp'});&/script&
&br/&&br/&
按城市显示
&div id=&map4& style=&height:300width:400border:1px solid #&&&/div&
&script type=&text/javascript&&ShowMap(&map4&,{city:'郑州金水区',title:'吊儿',lawfirm:'XXX公司',tel:'x',pic:'/images/100.jpg',ismove:'0',piobj:'nxp'});&/script&
&br/&&br/&
按IP定位显示
&div id=&map5& style=&height:300width:400border:1px solid #&&&/div&
&script type=&text/javascript&&ShowMap(&map5&,{title:'吊儿',lawfirm:'XXX公司',tel:'x',pic:'/images/100.jpg',ismove:'0',piobj:'nxp'});&/script&
&br/&&br/&
使用说明：&br/&
1、 在head引用bdMap.js&br/&
2、 设置DIV容器&div id=&map& style=&height:400width:600border:1px solid #&&&/div&&br/&
3、 JS执行ShowMap(&map&,{city:'郑州',addr:'经三路鑫苑路',title:'吊儿',lawfirm:'XXX公司',tel:'x',pic:'/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/&
&font color=red&注意：&/font&标注坐标显示的先后顺序：先按mapx ，mapx为空时按addr，addr为空时按city，city为空时按IP定位
&br/&&br/&
getBDAddress 根据浏览器获取地址：(需要浏览器支持html5)&br/&
  callBackFun: 获取回调函数&br/&
  spStr: 返回信息的分隔符，默认空。可以设置为,号。返回格式：省,市,区,街,门牌&br/&
function setAdd(v){
document.getElementById(&show&).innerHTML =
getBDAddress(setAdd);
演示：&span id=&show&&&/span&
&br/&&br/&
日 增加公交查询功能。
日 改显示窗体为SearchInfoWindow。
&p align=&center&&&a href=&& title=&访问沙里软件&&沙里软件&/a& &/p&
效果图如下:
按地址显示:
按坐标mapx显示:
默默说一句:这个图片上面的人,不是本人,谢谢!
按城市显示:
按IP定位显示:
代码下载地址:
我的热门文章在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
百度地图在地图中给标注点marker添加后click事件后
marker.addEventListener("click", function(){})
如何在其他地方自动触发这个marker点击事件？
因为输出marker是一个对象，所以并不能marker.click()
想做的就是如百度地图那样点击左边搜索结果栏右边标注点自动点击一次
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
感觉api确实不太好用，想出来俩解决方案。
1.可以定义好事件处理函数，想要触发时执行一遍：
marker.addEventListener('click',func);
function func(){
// 想要触发时，直接调用func
2.发现marker有一个属性B指向标记DOM，但B只在地图加载完成后才有值，否则为null，所以可以在地图加载完成后给给B绑定事件.
map.addEventListener("tilesloaded",function(){
marker.B.addEventListener('click',function(){
/* 使用zepto或jQuery
$(marker.B).on('click',function(){
// 注意触发时要保证地图加载完成
marker.B.click();
$(marker.B).trigger('click');
也可以不等地图加载完，定义marker后就直接绑定，但触发时还是触发marker.B也是可以的。
marker.addEventListener('click',function(){
// 注意触发时要保证地图加载完成
marker.B.click();
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
楼上的第二个方法现在是V了marker.V.click();
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：