<p> &nbsp;</p> <div id="dituContent" style="width: 100%; height: 550px; border: 1px solid rgb(204, 204, 204); overflow: hidden; position: relative; z-index: 0; color: rgb(0, 0, 0); text-align: left; background-image: url(http://api.map.baidu.com/images/bg.png);"> <div id="platform" style="overflow: visible; position: absolute; z-index: 0; left: 0px; top: 0px; cursor: url(http://api.map.baidu.com/images/openhand.cur) 8 8, default;"> <div style="position: absolute; z-index: -1; left: 355px; top: 275px; display: block;"> <img src="http://online4.map.bdimg.com/tile/?qt=tile&x=23689&y=7885&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -152px; top: 58px;" /><img src="http://online4.map.bdimg.com/tile/?qt=tile&x=23687&y=7887&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -408px; top: -198px;" /><img src="http://online4.map.bdimg.com/tile/?qt=tile&x=23688&y=7886&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -280px; top: -70px;" /><img src="http://online0.map.bdimg.com/tile/?qt=tile&x=23687&y=7888&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -408px; top: -326px;" /><img src="http://online3.map.bdimg.com/tile/?qt=tile&x=23688&y=7885&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -280px; top: 58px;" /><img src="http://online0.map.bdimg.com/tile/?qt=tile&x=23688&y=7887&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -280px; top: -198px;" /><img src="http://online3.map.bdimg.com/tile/?qt=tile&x=23687&y=7886&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -408px; top: -70px;" /><img src="http://online0.map.bdimg.com/tile/?qt=tile&x=23689&y=7886&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -152px; top: -70px;" /><img src="http://online0.map.bdimg.com/tile/?qt=tile&x=23690&y=7885&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -24px; top: 58px;" /><img src="http://online1.map.bdimg.com/tile/?qt=tile&x=23688&y=7888&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -280px; top: -326px;" /><img src="http://online1.map.bdimg.com/tile/?qt=tile&x=23689&y=7887&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -152px; top: -198px;" /><img src="http://online1.map.bdimg.com/tile/?qt=tile&x=23690&y=7886&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -24px; top: -70px;" /><img src="http://online2.map.bdimg.com/tile/?qt=tile&x=23687&y=7885&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -408px; top: 58px;" /><img src="http://online2.map.bdimg.com/tile/?qt=tile&x=23689&y=7888&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -152px; top: -326px;" /><img src="http://online2.map.bdimg.com/tile/?qt=tile&x=23690&y=7887&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -24px; top: -198px;" /><img src="http://online3.map.bdimg.com/tile/?qt=tile&x=23690&y=7888&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 128px; height: 128px; left: -24px; top: -326px;" /></div> <div class="BMap_mask" id="mask" style="position: absolute; left: 0px; top: 0px; z-index: 9; overflow: hidden; -webkit-user-select: none; width: 710px; height: 550px;"> &nbsp;</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;"> &nbsp;</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; width: 21px; height: 21px; left: 185px; top: 180px; z-index: -6850010; background: url(http://api.map.baidu.com/images/blank.gif);" title=""></div> <div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 600;"> &nbsp;</div> <div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 500;"> &nbsp;</div> <div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 400;"> <div style="position: absolute; margin: 0px; padding: 0px; width: 21px; height: 21px; left: -6px; top: -21px; overflow: hidden;"> <span class="BMap_Marker" style="position: absolute; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; left: 191px; top: 201px; z-index: -6850010;" unselectable="on"><img src="http://app.baidu.com/map/images/us_mk_icon.png" style="border:none;left:0px; top:0px; position:absolute;" /></span></div> <span class="BMap_Marker" style="position: absolute; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; left: 191px; top: 201px; z-index: -6850010;" unselectable="on"><label class="BMapLabel" style="position: absolute; display: inline; cursor: pointer; border: 1px solid rgb(128, 128, 128); padding: 1px; white-space: nowrap; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: arial, simsun; z-index: 80; color: rgb(51, 51, 51); -webkit-user-select: none; left: 9px; top: -20px; background-color: rgb(255, 255, 255);" unselectable="on">陕西雨佳人力资源有限公司</label></span></div> <div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 200;"> &nbsp;</div> </div> <div style="position: absolute; z-index: -1; left: 355px; top: 275px;"> <img src="http://online3.map.bdimg.com/tile/?qt=tile&x=11844&y=3944&z=16&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -280px; top: -455px;" /><img src="http://online2.map.bdimg.com/tile/?qt=tile&x=11845&y=3942&z=16&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -24px; top: 57px;" /><img src="http://online2.map.bdimg.com/tile/?qt=tile&x=11843&y=3944&z=16&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -536px; top: -455px;" /><img src="http://online3.map.bdimg.com/tile/?qt=tile&x=11845&y=3943&z=16&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -24px; top: -199px;" /><img src="http://online3.map.bdimg.com/tile/?qt=tile&x=11846&y=3942&z=16&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: 232px; top: 57px;" /><img src="http://online4.map.bdimg.com/tile/?qt=tile&x=11845&y=3944&z=16&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -24px; top: -455px;" /><img src="http://online4.map.bdimg.com/tile/?qt=tile&x=11846&y=3943&z=16&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: 232px; top: -199px;" /><img src="http://online2.map.bdimg.com/tile/?qt=tile&x=11844&y=3943&z=16&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -280px; top: -199px;" /><img src="http://online1.map.bdimg.com/tile/?qt=tile&x=11844&y=3942&z=16&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -280px; top: 57px;" /><img src="http://online1.map.bdimg.com/tile/?qt=tile&x=11843&y=3943&z=16&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -536px; top: -199px;" /><img src="http://online0.map.bdimg.com/tile/?qt=tile&x=11846&y=3944&z=16&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: 232px; top: -455px;" /><img src="http://online0.map.bdimg.com/tile/?qt=tile&x=11843&y=3942&z=16&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -536px; top: 57px;" /></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;"> &nbsp;</div> <div class="BMap_zoomer" style="top:0;right:0;"> &nbsp;</div> <div class="BMap_zoomer" style="bottom:0;left:0;"> &nbsp;</div> <div class="BMap_zoomer" style="bottom:0;right:0;"> &nbsp;</div> </div> <div class="anchorBL" style="height: 32px; position: absolute; z-index: 10; bottom: 0px; right: auto; top: auto; left: 1px;"> <a href="http://map.baidu.com/?sr=1" style="outline: none;" target="_blank" title="到百度地图首页"><img src="http://api.map.baidu.com/images/copyright_logo.png" style="border:none;width:77px;height:32px" /></a></div> <div class="BMap_cpyCtrl anchorBL" style="cursor: default; white-space: nowrap; bottom: 2px; right: auto; top: auto; left: 81px; position: absolute; z-index: 10;" unselectable="on"> <span _cid="1" style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 11px; line-height: normal; font-family: arial, simsun; display: inline; background: none;">&copy; 2015 Baidu</span></div> <div class="BMap_stdMpCtrl BMap_stdMpType0 BMap_noprint anchorTL" style="width: 52px; height: 226px; bottom: auto; right: auto; top: 10px; left: 10px; position: absolute; z-index: 1100;" unselectable="on"> <div class="BMap_stdMpPan"> <div class="BMap_button BMap_panN" title="向上平移"> &nbsp;</div> <div class="BMap_button BMap_panW" title="向左平移"> &nbsp;</div> <div class="BMap_button BMap_panE" title="向右平移"> &nbsp;</div> <div class="BMap_button BMap_panS" title="向下平移"> &nbsp;</div> <div class="BMap_stdMpPanBg BMap_smcbg"> &nbsp;</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"> &nbsp;</div> </div> <div class="BMap_button BMap_stdMpZoomOut" title="缩小一级"> <div class="BMap_smcbg"> &nbsp;</div> </div> </div> <div class="BMap_stdMpSlider" style="height: 133px;"> <div class="BMap_stdMpSliderBgTop" style="height: 124px;"> <div class="BMap_smcbg"> &nbsp;</div> </div> <div class="BMap_stdMpSliderBgBot" style="top: 124px;"> <div class="BMap_smcbg"> &nbsp;</div> </div> <div class="BMap_stdMpSliderMask" title="放置到此级别"> &nbsp;</div> <div class="BMap_stdMpSliderBar" style="cursor: url(http://api.map.baidu.com/images/openhand.cur) 8 8, default; top: 15px;" title="拖动缩放"> <div class="BMap_smcbg"> &nbsp;</div> </div> </div> <div class="BMap_zlHolder"> <div class="BMap_zlSt"> <div class="BMap_smcbg"> &nbsp;</div> </div> <div class="BMap_zlCity"> <div class="BMap_smcbg"> &nbsp;</div> </div> <div class="BMap_zlProv"> <div class="BMap_smcbg"> &nbsp;</div> </div> <div class="BMap_zlCountry"> <div class="BMap_smcbg"> &nbsp;</div> </div> </div> </div> </div> <div class="BMap_omCtrl BMap_noprint anchorBR quad4" style="width: 150px; height: 150px; bottom: 0px; right: 0px; top: auto; left: auto; position: absolute; z-index: 10;" unselectable="on"> <div class="BMap_omOutFrame" style="width: 149px; height: 149px;"> <div class="BMap_omInnFrame" style="bottom: auto; right: auto; top: 8px; left: 8px; width: 139px; height: 139px;"> <div class="BMap_omMapContainer" style="overflow: hidden; color: rgb(0, 0, 0); text-align: left; background-image: url(http://api.map.baidu.com/images/bg.png);"> <div id="platform" style="overflow: visible; position: absolute; z-index: 0; left: 0px; top: 0px; cursor: url(http://api.map.baidu.com/images/openhand.cur) 8 8, default;"> <div class="BMap_mask" id="mask" style="position: absolute; left: 0px; top: 0px; z-index: 9; overflow: hidden; -webkit-user-select: none; width: 139px; height: 139px;"> &nbsp;</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;"> &nbsp;</div> <div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 700;"> <div class="BMap_Division" style="position: absolute; width: 44px; display: block; overflow: hidden; border-width: 1px; border-style: solid; border-color: rgb(173, 207, 244) rgb(39, 75, 139) rgb(39, 75, 139) rgb(132, 176, 223); opacity: 1; z-index: 60; -webkit-user-select: none; left: 47px; top: 52px; height: 34px;"> <div class="BMap_omViewInnFrame" style="width: 42px; height: 32px;"> <div class="BMap_omViewMask"> &nbsp;</div> </div> </div> </div> <div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 600;"> &nbsp;</div> <div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 500;"> &nbsp;</div> <div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 400;"> &nbsp;</div> <div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 200;"> &nbsp;</div> </div> <div style="position: absolute; z-index: -1; left: 70px; top: 69px;"> <img src="http://online1.map.bdimg.com/tile/?qt=tile&x=740&y=246&z=12&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -82px; top: -140px;" /></div> </div> </div> <div class="BMap_omViewMv" style="cursor: url(http://api.map.baidu.com/images/openhand.cur) 8 8, default; width: 44px; height: 34px; left: 47px; top: 52px;"> <div class="BMap_omViewInnFrame" style="width: 42px; height: 32px;"> <div> &nbsp;</div> </div> </div> </div> </div> <div class="BMap_omBtn" style="bottom: 0px; right: 0px; top: auto; left: auto;"> &nbsp;</div> </div> <div class="BMap_scaleCtrl BMap_noprint anchorBL" style="bottom: 18px; right: auto; top: auto; left: 81px; width: 65px; position: absolute; z-index: 10;" unselectable="on"> <div class="BMap_scaleTxt" unselectable="on"> 200&nbsp;米</div> <div class="BMap_scaleBar BMap_scaleHBar"> <img src="http://api.map.baidu.com/images/mapctrls11.png" style="border:none" /></div> <div class="BMap_scaleBar BMap_scaleLBar"> <img src="http://api.map.baidu.com/images/mapctrls11.png" style="border:none" /></div> <div class="BMap_scaleBar BMap_scaleRBar"> <img src="http://api.map.baidu.com/images/mapctrls11.png" style="border:none" /></div> </div> </div> <style type="text/css"> html,body{margin:0;padding:0;} .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap} .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}</style> <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script><script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.1&ak=&services=true&t=20130716024058"></script> <link href="http://api.map.baidu.com/res/11/bmap.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> //创建和初始化地图函数： function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMarker();//向地图中添加marker } //创建地图函数： function createMap(){ var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图 var point = new BMap.Point(113.867946,22.592341);//定义一个中心点坐标 map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map;//将map变量存储在全局 } //地图事件设置函数： function setMapEvent(){ map.enableDragging();//启用地图拖拽事件，默认启用(可不写) map.enableScrollWheelZoom();//启用地图滚轮放大缩小 map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写) map.enableKeyboard();//启用键盘上下左右键移动地图 } //地图控件添加函数： function addMapControl(){ //向地图中添加缩放控件 var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(ctrl_nav); //向地图中添加缩略图控件 var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); map.addControl(ctrl_ove); //向地图中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); map.addControl(ctrl_sca); } //标注点数组 var markerArr = [{title:"新宝辉供应链有限公司",content:"新宝辉供应链有限公司",point:"113.867946|22.592341",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}} ]; //创建marker function addMarker(){ for(var i=0;i<markerArr.length;i++){ var json = markerArr[i]; var p0 = json.point.split("|")[0]; var p1 = json.point.split("|")[1]; var point = new BMap.Point(p0,p1); var iconImg = createIcon(json.icon); var marker = new BMap.Marker(point,{icon:iconImg}); var iw = createInfoWindow(i); var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)}); marker.setLabel(label); map.addOverlay(marker); label.setStyle({ borderColor:"#808080", color:"#333", cursor:"pointer" }); (function(){ var index = i; var _iw = createInfoWindow(i); var _marker = marker; _marker.addEventListener("click",function(){ this.openInfoWindow(_iw); }); _iw.addEventListener("open",function(){ _marker.getLabel().hide(); }) _iw.addEventListener("close",function(){ _marker.getLabel().show(); }) label.addEventListener("click",function(){ _marker.openInfoWindow(_iw); }) if(!!json.isOpen){ label.hide(); _marker.openInfoWindow(_iw); } })() } } //创建InfoWindow function createInfoWindow(i){ var json = markerArr[i]; var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>"); return iw; } //创建一个Icon function createIcon(json){ var icon = new BMap.Icon("http://app.baidu.com/map/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)}) return icon; } initMap();//创建和初始化地图 </script> <p> &nbsp;</p>