百度地图API学习---多标注显示
由于项目的需要,建设方要求我们为其搭建一个餐饮行业地图,我当时从来没弄过这方面的东西,后来仔细看api又四处找资料,东拼西凑把功能做出来了。但是很多地方还不是很完善,酸奶小妹的博客给了我莫大的帮助,详细的注释让我理解了很多东西,首先表示感谢。。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%;overflow: hidden;margin:0;} #allmap {margin-right: 234px;height: 100%;overflow: hidden;} #result {border-left:1px dotted #999;height:100%;width:235px;position:absolute;top:0px;right:0px;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=1.5&ak=你的密钥></script> <script> function tijiao() { document.form1.submit(); } </script> <title>餐饮服务行业电子地图</title> </head> <body> <div id="allmap" style="overflow:hidden;zoom:1;position:relative;"> <div id="container" style="height:100%;"></div> </div> <form action="" name="form1" id="from1"> </form> </body> <script type="text/javascript"> var map =new BMap.Map("container"); var point =new BMap.Point(116.011,29.711); map.centerAndZoom(point,15); map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.addControl(new BMap.NavigationControl()); //初始化地图控件 map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图 map.enableKeyboard();//启动键盘操作地图 var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT,offset:new BMap.Size(12,0)}); map.addControl(cr); //添加版权控件 var bs = map.getBounds(); cr.addCopyright({id: 1, content: "<a href='http://www.gtkj.com.cn' style='font-size:15px;' target='_blank'>技术支持:江西省国泰科技有限公司</a>", bounds: bs}); var points =[ new BMap.Point(115.995307,29.733113), new BMap.Point(116.000005,29.731799), new BMap.Point(115.998702,29.730478)]; //X个坐标点 var marker0 =new BMap.Marker(points[0]); // 创建X个标注 var marker1 =new BMap.Marker(points[1]); // 创建X个标注 var marker2 =new BMap.Marker(points[2]); // 创建X个标注 map.addOverlay(marker0); // 将标注添加到地图中 map.addOverlay(marker1); // 将标注添加到地图中 map.addOverlay(marker2); // 将标注添加到地图中 map.setViewport(points); //调整地图的最佳视野为显示标注数组point var opts0 = {title : '<span style="font-size:14px;color:#0A8021">九江信华建国酒店有限公司</span>'}; var opts1 = {title : '<span style="font-size:14px;color:#0A8021">喜唰唰火锅二店</span>'}; var opts2 = {title : '<span style="font-size:14px;color:#0A8021">喜唰唰火锅三店</span>'}; var infoWindow0 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>单位地址:</b>滨江路299号</br><b>量化分级等级:</b><img src='./lianghua/youxiu.png' width='25' height='25' align='middle' /></br><b>监管负责人:</b>胡昌国</div>",opts0); // 创建信息窗口对象,引号里可以书写任意的html语句。 var infoWindow1 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>单位地址:</b>浔阳路310号</br><b>量化分级等级:</b><img src='./lianghua/youxiu.png' width='25' height='25' align='middle' /></br><b>监管负责人:</b>胡昌国</div>",opts1); // 创建信息窗口对象,引号里可以书写任意的html语句。 var infoWindow2 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>单位地址:</b>大中路689号</br><b>量化分级等级:</b><img src='./lianghua/youxiu.png' width='25' height='25' align='middle' /></br><b>监管负责人:</b>胡昌国</div>",opts2); // 创建信息窗口对象,引号里可以书写任意的html语句。 marker0.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow0);}); marker1.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow1);}); marker2.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow2);}); </script>
----------------------------
人能懂迭代,神能通递归。
----------------------------