map.php 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <div class="map">
  2. <!--引用百度地图API-->
  3. <style type="text/css">
  4. html,body{margin:0;padding:0;}
  5. .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
  6. .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
  7. #dituContent img{ max-width: none; display: inline-block;max-width: none;max-height: none; }
  8. </style>
  9. <script type="text/javascript" src="http://api.map.baidu.com/api?key=&amp;v=1.1&amp;services=true"></script><script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.1&amp;ak=&amp;services=true&amp;t=20130716024058"></script><link rel="stylesheet" type="text/css" href="http://api.map.baidu.com/res/11/bmap.css">
  10. <!--百度地图容器-->
  11. <div style="width: 880px; height: 370px; border: 1px solid rgb(204, 204, 204); overflow: hidden; position: relative; z-index: 0; background-image: url(&quot;http://api.map.baidu.com/images/bg.png&quot;); color: rgb(0, 0, 0); text-align: left;" id="dituContent"><div id="platform" style="overflow: visible; position: absolute; z-index: 0; left: 0px; top: 0px; cursor: url(&quot;http://api.map.baidu.com/images/openhand.cur&quot;) 8 8, default;"><div id="mask" class=" BMap_mask" style="position: absolute; left: 0px; top: 0px; z-index: 9; overflow: hidden; user-select: none; width: 787px; height: 250px;"></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 200;"><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 800;"><div class="pop" style="position: absolute; cursor: default; left: 147px; top: 51px;"><div style="overflow: hidden; z-index: 1; position: absolute; left: 0px; top: 0px; width: 25px; height: 25px;"><img style="border:none;margin:0px;padding:0px;position:absolute;left:0px;top:0px;width:690px;height:786px;" src="http://api.map.baidu.com/images/iw3.png"></div><div class="top" style="overflow: hidden; z-index: 1; position: absolute; left: 25px; top: 0px; width: 213px; height: 25px;"><img src="http://api.map.baidu.com/images/iw3.png" style="position:absolute; left: -65px; top: -60px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 238px; top: 0px; width: 25px; height: 25px;"><img style="border:none;margin:0px;padding:0px;position:absolute;left:-665px;top:0px;width:690px;height:786px;" src="http://api.map.baidu.com/images/iw3.png"></div><div class="center" style="overflow: hidden; z-index: 1; position: absolute; left: 0px; top: 25px; width: 261px; height: 67px;"><img src="http://api.map.baidu.com/images/iw3.png" style="position:absolute;left:-65px;top:-60px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 0px; top: 92px; width: 25px; height: 25px;"><img style="border:none;margin:0px;padding:0px;position:absolute;left:0px;top:-665px;width:690px;height:786px;" src="http://api.map.baidu.com/images/iw3.png"></div><div class="bottom" style="overflow: hidden; z-index: 1; position: absolute; left: 25px; top: 92px; width: 213px; height: 24px;"><img src="http://api.map.baidu.com/images/iw3.png" style="position:absolute;left:-65px;top:-146px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 238px; top: 92px; width: 25px; height: 25px;"><img style="border:none;margin:0px;padding:0px;position:absolute;left:-665px;top:-665px;width:690px;height:786px;" src="http://api.map.baidu.com/images/iw3.png"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 115px; top: 92px; width: 34px; height: 50px;"><img style="border:none;margin:0px;padding:0px;position:absolute;left:-186px;top:-691px;width:690px;height:786px;" src="http://api.map.baidu.com/images/iw3.png"></div><div style="width: 231px; height: 85px; position: absolute; left: 16px; top: 16px; z-index: 10; overflow: hidden;"><div class="BMap_bubble_title" style="display: none; overflow: hidden; height: auto; line-height: 24px; white-space: nowrap; width: auto;"></div><div class="BMap_bubble_content" style="width: auto; height: auto;"><b class="iw_poi_title" title="东莞市箭冠汽车配件制造有限公司">东莞市箭冠汽车配件制造有限公司</b><div class="iw_poi_content">电&nbsp;话:400-881-2323<br>地&nbsp;址:中国广东省东莞市茶山镇茶山工业园</div></div><div class="BMap_bubble_max_content" style="display:none;position:relative"></div></div><img style="position: absolute; top: 12px; width: 12px; height: 12px; cursor: pointer; z-index: 10000; left: 238px;" src="http://api.map.baidu.com/images/iw_close.gif"><img style="position: absolute; top: 12px; width: 12px; height: 12px; cursor: pointer; z-index: 10000; display: none; left: 218px;" src="http://api.map.baidu.com/images/iw_plus.gif"></div></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 700;"><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; background: url(&quot;http://api.map.baidu.com/images/blank.gif&quot;); width: 21px; height: 21px; left: 252px; top: 191px; z-index: -4616586;" title=""></span></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 600;"><div class="shadow" style="position: absolute; left: 125px; top: 110px;" type="infowindow_shadow"><div style="overflow: hidden; z-index: 1; position: absolute; left: 51px; top: 0px; width: 70px; height: 30px;"><img onmousedown="return false" style="left: -323px; top: 0px;" src="http://api.map.baidu.com/images/iws3.png"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 121px; top: 0px; width: 175px; height: 30px;"><img onmousedown="return false" style="left: -393px; top: 0px;" src="http://api.map.baidu.com/images/iws3.png"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 296px; top: 0px; width: 70px; height: 30px;"><img onmousedown="return false" style="left: -1033px; top: 0px;" src="http://api.map.baidu.com/images/iws3.png"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 29px; top: 30px; width: 92px; height: 22px;"><img onmousedown="return false" style="top: -30px; left: -301px;" src="http://api.map.baidu.com/images/iws3.png"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 121px; top: 30px; width: 182px; height: 22px;"><img onmousedown="return false" style="left: -360px; top: -30px;" src="http://api.map.baidu.com/images/iws3.png"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 303px; top: 30px; width: 92px; height: 22px;"><img onmousedown="return false" style="top: -30px; left: -1041px;" src="http://api.map.baidu.com/images/iws3.png"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 0px; top: 52px; width: 50px; height: 60px;"><img onmousedown="return false" style="left: -14px; top: -310px;" src="http://api.map.baidu.com/images/iws3.png"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 50px; top: 52px; width: 17px; height: 60px;"><img onmousedown="return false" style="left: -255px; top: -310px;" src="http://api.map.baidu.com/images/iws3.png"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 67px; top: 52px; width: 140px; height: 60px;"><img onmousedown="return false" style="left: -440px; top: -310px;" src="http://api.map.baidu.com/images/iws3.png"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 207px; top: 52px; width: 67px; height: 60px;"><img onmousedown="return false" style="left: -255px; top: -310px;" src="http://api.map.baidu.com/images/iws3.png"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 274px; top: 52px; width: 70px; height: 60px;"><img onmousedown="return false" style="left: -754px; top: -310px;" src="http://api.map.baidu.com/images/iws3.png"></div></div></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 500;"></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 400;"><span class="BMap_Marker" unselectable="on" style="position: absolute; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; left: 258px; top: 212px; z-index: -4616586;"><div style="position: absolute; margin: 0px; padding: 0px; width: 21px; height: 21px; left: -6px; top: -21px; overflow: hidden;"><img src="http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png" style="border:none;left:0px; top:0px; position:absolute;"></div><label class=" BMapLabel" unselectable="on" style="position: absolute; display: none; cursor: pointer; background-color: rgb(255, 255, 255); border: 1px solid rgb(128, 128, 128); padding: 1px; white-space: nowrap; font: 12px arial, simsun; z-index: 80; color: rgb(51, 51, 51); user-select: none; left: 9px; top: -20px;">东莞市箭冠汽车配件制造有限公司</label></span></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 200;"></div></div><div style="position: absolute; z-index: -1; left: 393px; top: 125px;"><img src="http://online1.map.bdimg.com/tile/?qt=tile&amp;x=6189&amp;y=1282&amp;z=15&amp;styles=pl&amp;udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -217px; top: -217px;"><img src="http://online1.map.bdimg.com/tile/?qt=tile&amp;x=6190&amp;y=1281&amp;z=15&amp;styles=pl&amp;udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: 39px; top: 39px;"><img src="http://online0.map.bdimg.com/tile/?qt=tile&amp;x=6188&amp;y=1282&amp;z=15&amp;styles=pl&amp;udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -473px; top: -217px;"><img src="http://online0.map.bdimg.com/tile/?qt=tile&amp;x=6189&amp;y=1281&amp;z=15&amp;styles=pl&amp;udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -217px; top: 39px;"><img src="http://online2.map.bdimg.com/tile/?qt=tile&amp;x=6190&amp;y=1282&amp;z=15&amp;styles=pl&amp;udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: 39px; top: -217px;"><img src="http://online2.map.bdimg.com/tile/?qt=tile&amp;x=6191&amp;y=1281&amp;z=15&amp;styles=pl&amp;udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: 295px; top: 39px;"><img src="http://online4.map.bdimg.com/tile/?qt=tile&amp;x=6188&amp;y=1281&amp;z=15&amp;styles=pl&amp;udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -473px; top: 39px;"><img src="http://online3.map.bdimg.com/tile/?qt=tile&amp;x=6191&amp;y=1282&amp;z=15&amp;styles=pl&amp;udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: 295px; top: -217px;"></div></div><div style="overflow: visible; position: absolute; z-index: 1200; left: 0px; top: 0px; margin: 24px 120px auto; padding: 12px; background: rgba(255, 0, 0, 0.8); user-select: none;"><span style="position: absolute; top: -6px; right: -6px; padding: 1px; font-size: 12px; display: block; cursor: pointer; background: rgb(245, 243, 239); border: 1px solid rgba(63, 81, 181, 0.23); color: rgb(6, 6, 6); border-radius: 3px;">关闭</span><div style="position: relative; width: 100%; height: 100%; color: rgb(251, 243, 243); font-size: 14px; word-break: break-all;">您所使用的地图JS API版本过低,已不再维护,为保证地图基本功能正常使用,请尽快升级到<a target="_blank" href="https://lbsyun.baidu.com/index.php?title=jspopularGL" style="outline: none;cursor:pointer;">最新版地图JS API</a>。</div></div><div id="zoomer" style="position:absolute;z-index:0;top:0px;left:0px;overflow:hidden;visibility:hidden;cursor:url(http://api.map.baidu.com/images/openhand.cur) 8 8,default"><div class="BMap_zoomer" style="top:0;left:0;"></div><div class="BMap_zoomer" style="top:0;right:0;"></div><div class="BMap_zoomer" style="bottom:0;left:0;"></div><div class="BMap_zoomer" style="bottom:0;right:0;"></div></div><div class=" anchorBL" style="height: 32px; position: absolute; z-index: 10; inset: auto auto 0px 1px;"><a title="到百度地图首页" target="_blank" href="http://map.baidu.com/?sr=1" style="outline: none;"><img style="border:none;width:77px;height:32px" src="http://api.map.baidu.com/images/copyright_logo.png"></a></div><div unselectable="on" class=" BMap_cpyCtrl anchorBL" style="cursor: default; white-space: nowrap; inset: auto auto 2px 81px; position: absolute; z-index: 10;"><span style="-webkit-text-size-adjust:none;color:#000;background:none;line-height:15px;font:11px arial,simsun" _cid="1">© 2015 Baidu</span></div><div unselectable="on" class=" BMap_stdMpCtrl BMap_stdMpType0 BMap_noprint anchorTL" style="width: 52px; height: 226px; inset: 10px auto auto 10px; position: absolute; z-index: 1100;"><div class="BMap_stdMpPan"><div class="BMap_button BMap_panN" title="向上平移"></div><div class="BMap_button BMap_panW" title="向左平移"></div><div class="BMap_button BMap_panE" title="向右平移"></div><div class="BMap_button BMap_panS" title="向下平移"></div><div class="BMap_stdMpPanBg BMap_smcbg"></div></div><div class="BMap_stdMpZoom" style="height: 167px; width: 52px;"><div style="height: 167px; width: 37px;"><div class="BMap_button BMap_stdMpZoomIn" title="放大一级"><div class="BMap_smcbg"></div></div><div class="BMap_button BMap_stdMpZoomOut" title="缩小一级"><div class="BMap_smcbg"></div></div></div><div class="BMap_stdMpSlider" style="height: 133px;"><div class="BMap_stdMpSliderBgTop" style="height: 124px;"><div class="BMap_smcbg"></div></div><div class="BMap_stdMpSliderBgBot" style="top: 124px;"><div class="BMap_smcbg"></div></div><div class="BMap_stdMpSliderMask" title="放置到此级别"></div><div class="BMap_stdMpSliderBar" title="拖动缩放" style="cursor: url(&quot;http://api.map.baidu.com/images/openhand.cur&quot;) 8 8, default; top: 22px;"><div class="BMap_smcbg"></div></div></div><div class="BMap_zlHolder"><div class="BMap_zlSt"><div class="BMap_smcbg"></div></div><div class="BMap_zlCity"><div class="BMap_smcbg"></div></div><div class="BMap_zlProv"><div class="BMap_smcbg"></div></div><div class="BMap_zlCountry"><div class="BMap_smcbg"></div></div></div></div></div><div unselectable="on" class=" BMap_scaleCtrl BMap_noprint anchorBL" style="inset: auto auto 18px 81px; width: 71px; position: absolute; z-index: 10;"><div class="BMap_scaleTxt" unselectable="on">500&nbsp;米</div><div class="BMap_scaleBar BMap_scaleHBar"><img style="border:none" src="http://api.map.baidu.com/images/mapctrls11.png"></div><div class="BMap_scaleBar BMap_scaleLBar"><img style="border:none" src="http://api.map.baidu.com/images/mapctrls11.png"></div><div class="BMap_scaleBar BMap_scaleRBar"><img style="border:none" src="http://api.map.baidu.com/images/mapctrls11.png"></div></div></div>
  12. <script type="text/javascript">
  13. //创建和初始化地图函数:
  14. function initMap(){
  15. createMap();//创建地图
  16. setMapEvent();//设置地图事件
  17. addMapControl();//向地图添加控件
  18. addMarker();//向地图中添加marker
  19. }
  20. //创建地图函数:
  21. function createMap(){
  22. var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
  23. var point = new BMap.Point(113.879829,23.084743);//定义一个中心点坐标
  24. map.centerAndZoom(point,15);//设定地图的中心点和坐标并将地图显示在地图容器中
  25. window.map = map;//将map变量存储在全局
  26. }
  27. //地图事件设置函数:
  28. function setMapEvent(){
  29. map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
  30. map.enableScrollWheelZoom();//启用地图滚轮放大缩小
  31. map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
  32. map.enableKeyboard();//启用键盘上下左右键移动地图
  33. }
  34. //地图控件添加函数:
  35. function addMapControl(){
  36. //向地图中添加缩放控件
  37. var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
  38. map.addControl(ctrl_nav);
  39. //向地图中添加缩略图控件
  40. /*var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
  41. map.addControl(ctrl_ove);*/
  42. //向地图中添加比例尺控件
  43. var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
  44. map.addControl(ctrl_sca);
  45. }
  46. //标注点数组
  47. var markerArr = [{title:"东莞市箭冠汽车配件制造有限公司",content:"电&nbsp;话:400-881-2323<br/>地&nbsp;址:中国广东省东莞市茶山镇茶山工业园",point:"113.866776|23.082931",isOpen:1,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
  48. ];
  49. //创建marker
  50. function addMarker(){
  51. for(var i=0;i<markerArr.length;i++){
  52. var json = markerArr[i];
  53. var p0 = json.point.split("|")[0];
  54. var p1 = json.point.split("|")[1];
  55. var point = new BMap.Point(p0,p1);
  56. var iconImg = createIcon(json.icon);
  57. var marker = new BMap.Marker(point,{icon:iconImg});
  58. var iw = createInfoWindow(i);
  59. var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
  60. marker.setLabel(label);
  61. map.addOverlay(marker);
  62. label.setStyle({
  63. borderColor:"#808080",
  64. color:"#333",
  65. cursor:"pointer"
  66. });
  67. (function(){
  68. var index = i;
  69. var _iw = createInfoWindow(i);
  70. var _marker = marker;
  71. _marker.addEventListener("click",function(){
  72. this.openInfoWindow(_iw);
  73. });
  74. _iw.addEventListener("open",function(){
  75. _marker.getLabel().hide();
  76. })
  77. _iw.addEventListener("close",function(){
  78. _marker.getLabel().show();
  79. })
  80. label.addEventListener("click",function(){
  81. _marker.openInfoWindow(_iw);
  82. })
  83. if(!!json.isOpen){
  84. label.hide();
  85. _marker.openInfoWindow(_iw);
  86. }
  87. })()
  88. }
  89. }
  90. //创建InfoWindow
  91. function createInfoWindow(i){
  92. var json = markerArr[i];
  93. var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
  94. return iw;
  95. }
  96. //创建一个Icon
  97. function createIcon(json){
  98. var icon = new BMap.Icon("http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
  99. return icon;
  100. }
  101. initMap();//创建和初始化地图
  102. </script>
  103. </div>