在Web页面引入百度地图

清疚 2024-02-19 21:10 24阅读 0赞

准备工作：获得百度地图的ak

打开：[http://lbsyun.baidu.com/apiconsole/key?application=key][http_lbsyun.baidu.com_apiconsole_key_application_key]

其他步骤请参看图示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW54aWFvbW8xNjg4_size_16_color_FFFFFF_t_70][]

点击提交后 百度后台就生成你的专属ak了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW54aWFvbW8xNjg4_size_16_color_FFFFFF_t_70 1][]

代码编写：

<!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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    	</style>
    	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的ak"></script>
    	<title>文本标注</title>
    </head>
    <body>
    	<div id="allmap"></div> 
    			<div  id="divStats"
    				style="position: absolute; top: 10px; right: 10px; background-color: #FFF;border-radius:5px; padding: 5px 10px;display: block;background:url(/cainiao/static/gairui/images/bg-1.png) left top;color:#FFFFFF; ">
    				
    				<div>
    					供应商：<span id="orgCount">10</span>个
    				</div>
    				<div>
    					机构：<span id="devAllCount">86</span>个
    				</div>
    				<div>
    					设备：<span id="storageDev">80</span>台
    				</div>
    				<div>
    					安徽省：<span id="deliveryDev">30</span>台
    				</div>
    				<div>
    					福建省：<span id="faultDev">23</span>台
    				</div>
    				<div>
    					广东省：<span id="faultDev">27</span>台
    				</div>
    				<div>
    					 <span id="spanStats" class="iconStats" style="cursor: pointer;" data-toggle="modal" data-target="#devStatsModel"></span>
    					<input type="hidden" id="hidStats"> 
    				</div>
    			</div>
    </body>
    </html>
    <script type="text/javascript">
    	// 百度地图API功能
    	var map = new BMap.Map("allmap");
    	var point = new BMap.Point(114.046304,22.628841);
    	map.centerAndZoom(point, 5);
    	var opts = {
    	  position : point,    // 指定文本标注所在的地理位置
    	  offset   : new BMap.Size(1, 3)    //设置文本偏移量
    	}
    	var label = new BMap.Label("深圳市", opts);  // 创建文本标注对象
    		label.setStyle({
    			 color : "red",
    			 fontSize : "16px",
    			 height : "20px",
    			 lineHeight : "20px",
    			 fontFamily:"微软雅黑"
    		 });
    	 
      map.addOverlay(label);   
    </script>

需要注意的是，引入的百度地图在左下角带有百度地图的LOGO,如下图所示：

![20190723111620406.png][]

如果想不显示，怎么办呢？在CSS样式那里加上以下代码即可：

.BMap_cpyCtrl 
    {
       display: none;
     }
     
     .anchorBL
     {
         display: none;
      }

此外，右上角还有以下图标：

![20190723111727846.png][]

可根据实际需要选择，具体可参考以下做法：

map.addControl(new BMap.MapTypeControl()); 这句话是添加地图类型控件的意思。

现在百度地图默认类型控件有默认、卫星、混合，

如果我们想自定义这几个选项的话，那么就需要在new BMap.MapTypeControl())里传入参数了。

其中BMAP\_NORMAL\_MAP表示普通地图，BMAP\_SATELLITE\_MAP表示卫星地图，BMAP\_HYBRID\_MAP表示混合地图，BMAP\_PERSPECTICE\_MAP表示三维地图。

举例，如果我只想显示 普通地图和混合地图。那么只需将 bmap.addControl(new BMap.MapTypeControl()) 这句话改为：  
map.addControl(new BMap.MapTypeControl(\{mapTypes: \[BMAP\_NORMAL\_MAP, BMAP\_HYBRID\_MAP\]\}));

即可，如果只想显示普通地图，且不显示右上角的图标，把该行代码map.addControl(new BMap.MapTypeControl(\{mapTypes: \[BMAP\_NORMAL\_MAP, BMAP\_HYBRID\_MAP\]\}));去掉即可。

最后一点要强调的是，我们可以设置地图刚加载出来时的级别，如下面的代码：

map.centerAndZoom(new BMap.Point(114.046304,22.628841), 5);

后面的参数5即是级别，如果中心点经纬度在中国范围内，级别定义为5，那么加载出来的就是中国地图，

定义为8，则为省级地图，像上面的经纬度在广东省范围，加载出来就是广东省及附近的地图，

定义为13为市级地图，定义为16则为街道级地图。

[http_lbsyun.baidu.com_apiconsole_key_application_key]: http://lbsyun.baidu.com/apiconsole/key?application=key
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW54aWFvbW8xNjg4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/384eca24e8d44629a6c901e0e4cb8124.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoZW54aWFvbW8xNjg4_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2020edfa99854d8c852e2c430529340a.png
[20190723111620406.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/062b160db3304139b419452ddb38d5d8.png
[20190723111727846.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8f481afc87b84f7ba62fd7022d1856b3.png