如何在网页中嵌入百度地图

<p>百度公司像google,sogou一样，拥有一套属于自己独立的地图系统，该系统可以通过一个统一的接口“baidu map API”，将地图内置于任何一个页面中。“baidu map API”的使用和设置分为3个步骤：申请baidu map API key文件、在页面中放入代码、设置自己需要的参数。其过程如下：</p>
<p>1、在“http://openapi.baidu.com/map/index.html”中，注册百度地图API，然后输入需要内置百度地图页面的URL地址，生成API密钥（前提是拥有1个百度帐号并已登陆），将KEY文件复制保存。然后将“地图API调用示例”放入页面代码里。“地图API调用”源码为：<script type=”text/javascript” src=”http://api.map.baidu.com/api?key=&v=1.0&services=true” ></script> [说明：号代表注册得到的key，以下同]</p>
<p>2、这时，在页面中并不会出现内置的百度地图，还需要用html语言，让地图从程序转为对象。其源码为：

<script type=”text/javascript” src=”http://api.map.baidu.com/api?key=*&v=1.0&services=true” ></script>

<div style=”width:715px;height:240px;border:1px solid gary;margin-top: 15px;” id=”container”></div>  

   <script type=”text/javascript”>  

   var map = new BMap.Map(“container”);

   map.centerAndZoom(new BMap.Point(106.57675981521606 ,29.557312940647545 ), 17);

   map.addControl(new BMap.NavigationControl());  

   map.addControl(new BMap.ScaleControl());  

   map.addControl(new BMap.OverviewMapControl());

   var local = new BMap.LocalSearch(map, {

   renderOptions:{map: map}

   });

   local.search(“重庆解放碑”);

   </script></p>
<p>3、该代码的个人设置如下：

第1行把baidu map API 程序植入源码中；

第2行在页面中设置一个标签，宽度，长度可以自己调整；border为该标签外框的性质，1px为1个像素宽度，solid为实线，gray为边框显示颜色，margin-top为该标签距离与上部的距离。

第5行为地图中自己位置的坐标（如果不清楚自己位置的坐标，可以上google map查）。

第6~8行为植入地图缩放控制工具

第9~12行为地图中自己的位置，只需在local search后填入自己的位置名称（注：该位置必须是在百度地图中有的，也就是说如果百度地图没有收录你想显示的位置，很抱歉，无法标记，只能找一个接近的地点做为自己的位置，可以自己先上百度地图搜索一下看地址是否存在）。</p>
<p>上面这段源码可以放入想让地图在页面中显示的任意位置。</p>
<p><script type="text/javascript" src="http://api.map.baidu.com/api?key=*&amp;v=1.0&amp;services=true"></script><script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.0&;amp;ak=&amp;services=true&amp;t=20130716024057"></script><link rel="stylesheet" type="text/css" href="http://api.map.baidu.com/res/10/bmap.css";></p>
<div style="width: 500px; height: 240px; margin-top: 15px; overflow: hidden; position: relative; background-image: url(http://api.map.baidu.com/images/bg.png); color: rgb(0, 0, 0); text-align: left;" id="container"><font id="platform" style="overflow: visible; position: absolute; z-index: 0; left: -334px; top: 457px; cursor: url(http://api.map.baidu.com/images/openhand.cur), default;"><font id="mask" class="BMap_mask" style="position: absolute; left: 334px; top: -457px; z-index: 9; overflow: hidden; width: 500px; height: 240px;"></font><div style="position:absolute;top:0;left:0;width:0;height:0;z-index:200"><div style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; z-index: 700;" type="system"><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; background-image: url(http://api.map.baidu.com/images/blank.gif); width: 23px; height: 25px; left: 647px; top: -332px; z-index: -92104832; background-position: initial initial; background-repeat: initial initial;" title="解放碑步行街"></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; background-image: url(http://api.map.baidu.com/images/blank.gif); width: 23px; height: 25px; left: 667px; top: -256px; z-index: -92101024; background-position: initial initial; background-repeat: initial initial;" title="解放碑好吃街"></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; background-image: url(http://api.map.baidu.com/images/blank.gif); width: 23px; height: 25px; left: 800px; top: -245px; z-index: -92100480; background-position: initial initial; background-repeat: initial initial;" title="重庆解放碑威斯汀酒店"></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; background-image: url(http://api.map.baidu.com/images/blank.gif); width: 23px; height: 25px; left: 701px; top: -424px; z-index: -92109440; background-position: initial initial; background-repeat: initial initial;" title="重庆解放碑王府井店"></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; background-image: url(http://api.map.baidu.com/images/blank.gif); width: 23px; height: 25px; left: 557px; top: -202px; z-index: -92098304; background-position: initial initial; background-repeat: initial initial;" title="美特斯邦威重庆解放碑旗舰店"></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; background-image: url(http://api.map.baidu.com/images/blank.gif); width: 23px; height: 25px; left: 315px; top: -376px; z-index: -92107072; background-position: initial initial; background-repeat: initial initial;" title="重庆解放碑七楼宾馆"></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; background-image: url(http://api.map.baidu.com/images/blank.gif); width: 23px; height: 25px; left: 501px; top: -79px; z-index: -92092128; background-position: initial initial; background-repeat: initial initial;" title="重庆解放碑百货有限责任公司"></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; background-image: url(http://api.map.baidu.com/images/blank.gif); width: 23px; height: 25px; left: 625px; top: -412px; z-index: -92108864; background-position: initial initial; background-repeat: initial initial;" title="重庆解放碑中心公寓"></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; background-image: url(http://api.map.baidu.com/images/blank.gif); width: 23px; height: 25px; left: 549px; top: -134px; z-index: -92094880; background-position: initial initial; background-repeat: initial initial;" title="解放碑奥特莱斯"></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; background-image: url(http://api.map.baidu.com/images/blank.gif); width: 23px; height: 25px; left: 554px; top: -111px; z-index: -92093760; background-position: initial initial; background-repeat: initial initial;" title="重庆保利万和解放碑店"></span></div><div style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; z-index: 500;" type="system"></div><div style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; z-index: 400;" type="system"><span class="BMap_Marker" unselectable="on" style="position: absolute; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; left: 656px; top: -307px; z-index: -92104832;"><div style="position:absolute;padding:0;margin:0;border:0;overflow:hidden;width:23px;height:25px;left:-9px;top:-25px;"> </div></span><span class="BMap_Marker" unselectable="on" style="position: absolute; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; left: 676px; top: -231px; z-index: -92101024;"><div style="position:absolute;padding:0;margin:0;border:0;overflow:hidden;width:23px;height:25px;left:-9px;top:-25px;"> </div></span><span class="BMap_Marker" unselectable="on" style="position: absolute; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; left: 809px; top: -220px; z-index: -92100480;"><div style="position:absolute;padding:0;margin:0;border:0;overflow:hidden;width:23px;height:25px;left:-9px;top:-25px;"> </div></span><span class="BMap_Marker" unselectable="on" style="position: absolute; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; left: 710px; top: -399px; z-index: -92109440;"><div style="position:absolute;padding:0;margin:0;border:0;overflow:hidden;width:23px;height:25px;left:-9px;top:-25px;"> </div></span><span class="BMap_Marker" unselectable="on" style="position: absolute; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; left: 566px; top: -177px; z-index: -92098304;"><div style="position:absolute;padding:0;margin:0;border:0;overflow:hidden;width:23px;height:25px;left:-9px;top:-25px;"> </div></span><span class="BMap_Marker" unselectable="on" style="position: absolute; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; left: 324px; top: -351px; z-index: -92107072;"><div style="position:absolute;padding:0;margin:0;border:0;overflow:hidden;width:23px;height:25px;left:-9px;top:-25px;"> </div></span><span class="BMap_Marker" unselectable="on" style="position: absolute; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; left: 510px; top: -54px; z-index: -92092128;"><div style="position:absolute;padding:0;margin:0;border:0;overflow:hidden;width:23px;height:25px;left:-9px;top:-25px;"> </div></span><span class="BMap_Marker" unselectable="on" style="position: absolute; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; left: 634px; top: -387px; z-index: -92108864;"><div style="position:absolute;padding:0;margin:0;border:0;overflow:hidden;width:23px;height:25px;left:-9px;top:-25px;"> </div></span><span class="BMap_Marker" unselectable="on" style="position: absolute; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; left: 558px; top: -109px; z-index: -92094880;"><div style="position:absolute;padding:0;margin:0;border:0;overflow:hidden;width:23px;height:25px;left:-9px;top:-25px;"> </div></span><span class="BMap_Marker" unselectable="on" style="position: absolute; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; left: 563px; top: -86px; z-index: -92093760;"><div style="position:absolute;padding:0;margin:0;border:0;overflow:hidden;width:23px;height:25px;left:-9px;top:-25px;"> </div></span></div><span style="position: absolute; z-index: 800; left: 656px; top: -332px;" type="system"><div class="pop" style="position: absolute; cursor: default; top: -111px; left: -114.5px;"><div style="overflow: hidden; z-index: 1; position: absolute; left: 0px; top: 0px; width: 25px; height: 25px;"></div><div class="top" style="overflow: hidden; z-index: 1; position: absolute; left: 25px; top: 0px; width: 212px; height: 25px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 237px; top: 0px; width: 25px; height: 25px;"></div><div class="center" style="overflow: hidden; z-index: 1; position: absolute; left: 0px; top: 25px; width: 260px; height: 37px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 0px; top: 62px; width: 25px; height: 25px;"></div><div class="bottom" style="overflow: hidden; z-index: 1; position: absolute; left: 25px; top: 62px; width: 212px; height: 24px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 237px; top: 62px; width: 25px; height: 25px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 83px; top: 62px; width: 97px; height: 50px;"></div><div style="width: 230px; height: 55px; position: absolute; left: 16px; top: 16px; z-index: 10; overflow-x: auto; overflow-y: hidden;"><div class="BMap_bubble_title" style="overflow: hidden; height: 24px; line-height: 24px;"><p style="width:210px;font-family:arial,simsun,sans-serif;line-height:16px;margin:0;font-size:14px;color:#cc5522;font-weight:bold;white-space:nowrap;overflow:hidden" title="解放碑步行街">解放碑步行街</p></div><div class="BMap_bubble_content" style="display: block; width: auto; height: auto;"><div style="font:12px arial,sans-serif"><table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody><tr><td style="vertical-align:top;width:38px;white-space:nowrap;word-break:keep-all">地址： </td><td>重庆市渝中区 </td></tr></tbody></table></div></div><div class="BMap_bubble_max_content" style="display: none; position: relative;"></div></div></div></span><span style="position: absolute; z-index: 600; left: 656px; top: -332px;" type="system"><div class="shadow" style="position: absolute; top: -67px; left: -136px;" type="infowindow_shadow"><div style="overflow: hidden; z-index: 1; position: absolute; left: 36px; top: 0px; width: 70px; height: 30px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 106px; top: 0px; width: 173px; height: 30px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 279px; top: 0px; width: 70px; height: 30px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 29px; top: 30px; width: 77px; height: 7px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 106px; top: 30px; width: 195px; height: 7px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 301px; top: 30px; width: 77px; height: 7px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 0px; top: 37px; width: 50px; height: 60px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 50px; top: 37px; width: 16px; height: 60px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 66px; top: 37px; width: 140px; height: 60px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 206px; top: 37px; width: 66px; height: 60px;"></div><div style="overflow: hidden; z-index: 1; position: absolute; left: 272px; top: 37px; width: 70px; height: 60px;"></div></div></span></div><div style="position: absolute; z-index: -1; left: 584px; top: -337px;"></div></font><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),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 unselectable="on" class=" BMap_cpyCtrl anchorBL" style="cursor: default; white-space: nowrap; bottom: 2px; right: auto; top: auto; left: 81px; position: absolute; z-index: 10;"><span style="color: rgb(0, 0, 0); background-image: none; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; line-height: normal; font-family: arial, simsun; display: inline; background-position: initial initial; background-repeat: initial initial;" _cid="1">© 2015 Baidu</span></div><div class=" anchorBL" style="height: 32px; position: absolute; z-index: 10; bottom: 0px; right: auto; top: auto; left: 1px;"></div><div unselectable="on" 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;"><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(http://api.map.baidu.com/images/openhand.cur), default; top: 8px;"><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="bottom: 18px; right: auto; top: auto; left: 81px; width: 61px; position: absolute; z-index: 10;"><div class="BMap_scaleTxt" unselectable="on">100 米</div><div class="BMap_scaleBar BMap_scaleHBar"></div><div class="BMap_scaleBar BMap_scaleLBar"></div><div class="BMap_scaleBar BMap_scaleRBar"></div></div><div unselectable="on" class=" BMap_omCtrl BMap_noprint anchorBR quad4" style="width: 15px; height: 15px; bottom: 0px; right: 0px; top: auto; left: auto; position: absolute; z-index: 10;"><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"></div><div class="BMap_omViewMv" style="cursor: url(http://api.map.baidu.com/images/openhand.cur), default;"><div class="BMap_omViewInnFrame"><div></div></div></div></div></div><div class="BMap_omBtn BMap_omBtnClosed" style="bottom: 0px; right: 0px; top: auto; left: auto;"></div></div></div>
<p> <script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(106.57675981521606,29.557312940647545), 17);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search("重庆解放碑");
</script></p>