在Web页面引入百度地图

最新推荐文章于 2024-08-03 16:53:18 发布

moxiaoran5753

最新推荐文章于 2024-08-03 16:53:18 发布

阅读量4.2k

点赞数

分类专栏：前端框架

本文链接：https://blog.csdn.net/shenxiaomo1688/article/details/96974200

版权

前端框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

打开：http://lbsyun.baidu.com/apiconsole/key?application=key

其他步骤请参看图示：

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

代码编写：

<!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-->
			<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,如下图所示：

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

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

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

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

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则为街道级地图。