javaScript 百度地图api的基本用法

不知名的前端专家

于 2022-04-01 17:25:13 发布

阅读量1.6k

点赞数

文章标签： javascript 前端百度云

本文链接：https://blog.csdn.net/start1018/article/details/123902894

版权

首先，如果想调用百度地图api，你需要获取一个百度地图api的密钥。
申请密钥很简单，在百度地图api的首页就有相关链接(https://lbsyun.baidu.com/index.php)，填写相关信息百度就会给你一个密钥了。

接下来，就是引入百度地图的api

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">

接下来我们就可以创建一个地图试试看了。

<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=G3mqo7AtPHsGsYsYnyzXKpqOdVDbkehu"></script>
		<title>Hello, World</title>
		<style type="text/css">
			#container {
				height: 400px;
				width: 666px;
			}
		</style>
	</head>

	<body>
		<div id="container"></div>
		<script type="text/javascript">
			var map = new BMapGL.Map("container");
			// 创建地图实例 
			var point = new BMapGL.Point(116.404, 39.915);
			// 创建点坐标 
			map.centerAndZoom(point, 15);
			// 初始化地图，设置中心点坐标和地图级别 
		</script>
	</body>

</html>

我的第一个百度地图

百度地图提供了非常丰富的功能空间共我们使用。

Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
MapTypeControl：地图类型控件，默认位于地图右上方(地图，卫星，三维)。
CopyrightControl：版权控件，默认位于地图左下方。
GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。

map.addControl(new BMap.NavigationControl());//缩放平移控件
map.addControl(new BMap.ScaleControl());    //比例尺
map.addControl(new BMap.OverviewMapControl());//缩略图
map.addControl(new BMap.MapTypeControl()); //地图类型
map.setCurrentCity("青岛");

注意：当设置城市信息时，MapTypeControl的切换功能才能可用
地图事件
百度地图API中的大部分对象都含有addEventListener方法，我们可以通过该方法来监听对象事件。

map.addEventListener("click", function(){    
 alert("您点击了地图。");    
});

当我们不再希望监听事件时，可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。

map.removeEventListener("click", functionA);
map.addEventListener("click", functionA);

地图遮盖物

Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。
Marker：标注表示地图上的点，可自定义标注的图标。
Label：表示地图上的文本标注，您可以自定义标注的文本内容。
Polyline：表示地图上的折线。
Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。
Circle: 表示地图上的圆。
InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开。

不知名的前端专家

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
javaScript 百度地图api的基本用法

首先，如果想调用百度地图api，你需要获取一个百度地图api的密钥。申请密钥很简单，在百度地图api的首页就有相关链接(https://lbsyun.baidu.com/index.php)，填写相关信息百度就会给你一个密钥了。接下来，就是引入百度地图的api<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥">接下来我
复制链接

扫一扫