百度地图JavaScript API GL

最新推荐文章于 2024-06-27 16:23:14 发布

稳重聪头

最新推荐文章于 2024-06-27 16:23:14 发布

阅读量2.5k

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/nnjjn/article/details/123909443

版权

介绍

百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口。

下面通过一个简单的示例，来学习一下快速创建一张“我的地图”，

百度地图的“Hello World”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I
">
		</script>
		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}

			#container {
				height: 100%
			}
		</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>

注意

在HTML文档中引入：

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

向地图添加控件

使用Map.addControl()方法向地图添加控件。

  // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

向地图中添加标注

var content = "label";
			var label

最低0.47元/天解锁文章

稳重聪头

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
百度地图JavaScript API GL

介绍百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口。下面通过一个简单的示例，来学习一下快速创建一张“我的地图”，百度地图的“Hello World”<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"
复制链接

扫一扫