百度API的经历，怎样为多个点添加带检索功能的信息窗口
不管我们要做什么样的效果，APIKey（密钥）都是不可缺少的要件，所以我们需要先去百度申请我们的APIKey！！！
伸手党，请直接到页面底部获取完整代码！
最近做一个门店查询的内容展示，考虑到用户直观感受，决定用百度地图API处理之，于是入了这个大坑
因为这是第一次接触百度地图API，所以开始之前去研究百度的API文档和示例demo，
在demo中找到了带检索功能的信息窗口和为多个点添加文本信息窗口的示例，显然这都不是我想要的效果，如果能综合一下不就好了吗，决定好了，那么开始工作吧
先来看看百度的demo
一、带检索功能的信息窗口
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap {height: 500px;width:100%;overflow: hidden;} #result {width:100%;font-size:12px;} dl,dt,dd,ul,li{ margin:0; padding:0; list-style:none; } dt{ font-size:14px; font-family:"微软雅黑"; font-weight:bold; border-bottom:1px dotted #000; padding:5px 0 5px 5px; margin:5px 0; } dd{ padding:5px 0 0 5px; } li{ line-height:28px; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> <title>带检索功能的信息窗口</title> </head> <body> <div id="allmap"> </div> <div id="result"> <input type="button" value="默认样式" onclick="searchInfoWindow.open(marker);"/> <input type="button" value="样式1" onclick="openInfoWindow1()"/> <input type="button" value="样式2" onclick="openInfoWindow2()"/> <input type="button" value="样式3" onclick="openInfoWindow3()"/> </div> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map('allmap'); var poi = new BMap.Point(116.307852,40.057031); map.centerAndZoom(poi, 16); map.enableScrollWheelZoom(); var content = '<div style="margin:0;line-height:20px;padding:2px;">' + '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' + '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' + '</div>'; //创建检索信息窗口对象 var searchInfoWindow = null; searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { title : "百度大厦", //标题 width : 290, //宽度 height : 105, //高度 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); var marker = new BMap.Marker(poi); //创建marker对象 marker.enableDragging(); //marker可拖拽 marker.addEventListener("click", function(e){ searchInfoWindow.open(marker); }) map.addOverlay(marker); //在地图中添加marker //样式1 var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", { title: "信息框1", //标题 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ BMAPLIB_TAB_FROM_HERE, //从这里出发 BMAPLIB_TAB_SEARCH //周边检索 ] }); function openInfoWindow1() { searchInfoWindow1.open(new BMap.Point(116.319852,40.057031)); } //样式2 var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "信息框2内容", { title: "信息框2", //标题 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ BMAPLIB_TAB_SEARCH //周边检索 ] }); function openInfoWindow2() { searchInfoWindow2.open(new BMap.Point(116.324852,40.057031)); } //样式3 var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "信息框3内容", { title: "信息框3", //标题 width: 290, //宽度 height: 40, //高度 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ ] }); function openInfoWindow3() { searchInfoWindow3.open(new BMap.Point(116.328852,40.057031)); } </script> </body> </html>
二、为多个点添加文本信息窗口
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{width:100%;height:500px;} p{margin-left:5px; font-size:14px;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <title>给多个点添加信息窗口</title> </head> <body> <div id="allmap"></div> <p>点击标注点，可查看由纯文本构成的简单型信息窗口</p> </body> </html> <script type="text/javascript"> // 百度地图API功能 map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.417854,39.921988), 15); var data_info = [[116.417854,39.921988,"地址：北京市东城区王府井大街88号乐天银泰百货八层"], [116.406605,39.921585,"地址：北京市东城区东华门大街"], [116.412222,39.912345,"地址：北京市东城区正义路甲5号"] ]; var opts = { width : 250, // 信息窗口宽度 height: 80, // 信息窗口高度 title : "信息窗口" , // 信息窗口标题 enableMessage:true//设置允许信息窗发送短息 }; for(var i=0;i<data_info.length;i++){ var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1])); // 创建标注 var content = data_info[i][2]; map.addOverlay(marker); // 将标注添加到地图中 addClickHandler(content,marker); } function addClickHandler(content,marker){ marker.addEventListener("click",function(e){ openInfo(content,e)} ); } function openInfo(content,e){ var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow,point); //开启信息窗口 } </script>
从这两个demo中可以发现，百度给出的示例并不难，也很好理解（但要注意，细心一点便可发现，这两个示例引入了不同的API接口，这也是为什么前面要说这是个大坑的原因），
读懂了两个示例之后，我们就可以开始制作我们想要的效果了~
首先，实例化地图，这个就不贴代码了，DEMO里面很清楚
第二步就是创建我们需要展示的点的数据和信息窗口的样式了（要说的都在注释里面），经纬度自行到百度API进行采集哦
var jdata = [ [104.420922,31.164401,'文本1'], [104.392654,31.12696,"文本2"], [104.417487,31.12564,"文本3"], [104.411933,31.134078,"文本4"] ]; //定义检索信息窗口样式 var opts = { title : "百度地图", //标题 width : 290, //宽度 height : 90, //高度 enableSendToPhone:false, //隐藏发送短信按钮 panel : "gjlx", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[/*留空可以隐藏检索窗口*/ //BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }
数据也有了，样式也定义好了，现在就创建信息窗口
for (var i=0;i<jdata.length;i++){ var content = jdata[i][2];//取得信息窗内容 var poii = new BMap.Point(jdata[i][0],jdata[i][1]);//取得标注坐标 var marker = new BMap.Marker(poii);//创建marker对象,{icon:mcIcon} marker.setHeight = 30; marker.setWidth = 30; map.addOverlay(marker);//在地图中添加marker //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 addClickHandler(content,marker);//调用函数addClickHandler }
在这里先把所有数据点添加到地图上，并调用一个自定义函数addClickHandler(),这个函数在上面的示例2中可以看到，它是用来监听事件的，把这个地方稍作改动就可以达到我们想要的效果了，看下面的代码
var searchInfoWindow = null;//这里需要先申明这个变量，不能放到函数中，否则报错 function addClickHandler(content,marker){ /*创建带检索功能的信息窗*/ var SearchInfoWindow = new BMapLib.SearchInfoWindow(map,content,opts); /* 添加事件监听函数 */ marker.addEventListener("click", function(e){ SearchInfoWindow.open(marker); }); }
完整代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap {height: 100%;width:100%;overflow: hidden;} #result {width:100%;font-size:12px;position: fixed;} #gjlx {display: block;position: absolute;top:0;right:0;width:300px;height:100%;} dl,dt,dd,ul,li{margin:0;padding:0;list-style:none;} dt{font-size:14px;font-family:"微软雅黑";font-weight:bold;border-bottom:1px dotted #000;padding:5px 0 5px 5px;margin:5px 0;} dd{padding:5px 0 0 5px;} li{line-height:28px;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> <!-- //1.5版本的API文档h t t p://api.map.baidu.com/library/SearchInfoWindow/1.5/docs/symbols/BMapLib.SearchInfoWindow.html --> <title>带检索功能的信息窗口</title> </head> <body> <div id="allmap"></div> <di id="gjlx"></div> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map('allmap'); /* *设置地图样式,方法： map.setMapStyle({styleJson:[下面的json对象]}) JSON对象格式： {"featureType":"要素1","elementType":"属性","stylers":"{样式集}"}, {"featureType":"要素2","elementType":"属性","stylers":"{样式集}"} *featureType地图要素： background背景｛land陆地，water水系，green绿地，manmade人造区域，building建筑｝ road道路｛highway高速及国道，arterial城市主路，local普通道路，railway铁路，subway地铁｝ poi兴趣点｛无下级属性｝ administrative行政区划｛label行政标注，boundary边界线｝ *elementType属性 all全部 geometry几何｛geometry全部，geometry.fill填充，geometry.stroke边框｝ labels文本｛labels全部，labels.text.fill填充，labels.text.stroke边框，labels.icon图标｝ *stylers样式 color颜色｛#000000 - #ffffff｝ hue色相｛#000000 - #ffffff｝ lightness亮度｛-10 - 100｝ saturation饱和度｛-10 - 100｝ weight宽度｛0.1 - 8｝ *个性化在线编辑器地址：http://developer.baidu.com/map/custom/ */ map.setMapStyle({ styleJson: [ { "featureType": "poi",//兴趣点 "elementType": "labels.icon", "stylers": { "visibility": "off" } },{ "featureType": "highway",//高速路&国道 "elementType": "geometry.fill", "stylers": { "color":"#F4A13C",//F08A0D "visibility": "on" } },{ "featureType": "arterial",//城市主路 "elementType": "geometry.fill", "stylers": { "color":"#F7B86C", "visibility": "on" } },{ "featureType": "local",//普通道路 "elementType": "geometry.fill", "stylers": { "color":"#F7D46C", "visibility": "on" } }] }); var poi = new BMap.Point(104.407912,31.137432);//创建一个坐标 map.centerAndZoom(poi, 14);//设置地图中心点，地图缩放级别3-19 map.enableScrollWheelZoom();//启用滚轮放大缩小 map.enableContinuousZoom();//启用惯性拖拽 map.addControl(new BMap.ScaleControl());// 添加默认比例尺控件 map.addControl(new BMap.NavigationControl());//添加默认缩放平移控件
//将点数据放到数组中 var jdata = [ [104.420922,31.164401,'文本1'], [104.392654,31.12696,"文本2"], [104.417487,31.12564,"文本3"], [104.411933,31.134078,"文本4"] ]; //定义检索信息窗口样式 var opts = { title : "百度地图", //标题 width : 290, //宽度 height : 90, //高度 enableSendToPhone:false, //隐藏发送短信按钮 panel : "gjlx", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[/*留空可以隐藏检索窗口*/ //BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] } //创建检索信息窗口对象 for (var i=0;i<jdata.length;i++){//for循环遍历数组，取得需要的数据 var content = jdata[i][2];//取得信息窗内容 var poii = new BMap.Point(jdata[i][0],jdata[i][1]);//取得标注坐标 var marker = new BMap.Marker(poii);//创建marker对象 marker.setHeight = 30; marker.setWidth = 30; map.addOverlay(marker);//在地图中添加marker //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 addClickHandler(content,marker);//调用自定义函数addClickHandler } var searchInfoWindow = null; function addClickHandler(content,marker){ /*创建带检索功能的信息窗*/ var SearchInfoWindow = new BMapLib.SearchInfoWindow(map,content,opts); /* 添加事件监听函数 */ marker.addEventListener("click", function(e){ SearchInfoWindow.open(marker); }); } </script> </body> </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=utf-8" /> <title>百度地图API显示多个标注点带百度样式信息检索窗口的代码</title> <!-- 原作博客地址：http://blog.csdn.net/a497785609/article/details/24009031 --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" /> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #map{position: fixed; height:100%; width: 100%; overflow: hidden;} </style> </head> <body> <div id="map"></div> <script type="text/javascript"> var markerArr = [{ title: "名称：德阳万达广场", point: "104.420922,31.164401", address: "德阳市华山北路8号", tel: "08386922222" }, { title: "名称：德阳凯旋国际（上美广场）", point: "104.392654,31.12696", address: "德阳市岷江西路", tel: "18500000000" }, { title: "名称：德阳盛唐摩尔（世纪联华）", point: "104.417487,31.12564", address: "德阳市", tel: "18500000000" }, { title: "德阳凯德广场（沃尔玛）", point: "104.411933,31.134078", address: "德阳市", tel: "18500000000" } ]; function map_init() { var map = new BMap.Map("map"); // 创建Map实例 var point = new BMap.Point(104.411434,31.149053); //地图中心点，德阳市 map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。 map.enableScrollWheelZoom(true); //启用滚轮放大缩小 //地图、卫星、混合模式切换 map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP] })); //向地图中添加缩放控件 var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); //向地图中添加缩略图控件 var ctrlOve = new window.BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrlOve); //向地图中添加比例尺控件 var ctrlSca = new window.BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrlSca); var point = new Array(); //存放标注点经纬信息的数组 var marker = new Array(); //存放标注点对象的数组 var info = new Array(); //存放提示信息窗口对象的数组 var searchInfoWindow = new Array(); //存放检索信息窗口对象的数组 for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].point.split(",")[0]; // var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来 point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点 marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记 map.addOverlay(marker[i]); marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 //显示marker的title，marker多的话可以注释掉 var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) }); marker[i].setLabel(label); // 创建信息窗口对象 info[i] = "<p style=’font-size:12px;lineheight:1.8em;’>" + "</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].tel + "</br></p>"; //创建百度样式检索信息窗口对象 searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], { title: markerArr[i].title, //标题 width: 290, //宽度 height: 55, //高度 panel: "panel", //检索结果面板 enableAutoPan: true, //自动平移 searchTypes: [ //BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); //添加点击事件 marker[i].addEventListener("click", (function(k) { // js 闭包 return function() { //将被点击marker置为中心 //map.centerAndZoom(point[k], 18); //在marker上打开检索信息窗口 searchInfoWindow[k].open(marker[k]); } })(i)); } } //异步调用百度js function map_load() { var load = document.createElement("script"); load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init"; document.body.appendChild(load); } window.onload = map_load; </script> </body> </html>
最后再说一句，一般我们都会将地图API完成后放置到一个隐藏的div中，当用户点击某个链接或者按钮后，再显示这个层，
这里需要注意，在显示层之后再进行地图的实例化，否则您设置的地图中心点会有所偏移
