百度地图使用_百度地图csdn-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45272615/article/details/135363004

该篇文章介绍了如何在HTML页面中集成百度地图WebGLAPI，实现实时输入框搜索并显示地理位置的功能，包括地图初始化、标记点添加、LocalSearch的使用等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		#container {
			width: 800px;
			height: 600px;
		}
	</style>
	<!-- 01 导入js -->
	<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B&output=jsonp">
	</script>
</head>

<body>
	<input type="" value="" onchange="search(this)" />
	<!-- 准备容器 -->
	<div id="container"></div>
	<script>
		// 初始化地图
		var map = new BMapGL.Map("container")
		// 准备一个中心点（经度，纬度）
		var point = new BMapGL.Point(113.665, 34.784);
		// 设置中心点和缩放级别
		map.centerAndZoom(point, 15);
		// 鼠标滚轮缩放
		map.enableScrollWheelZoom(true);

		// 添加一个点
		var marker = new BMapGL.Marker(point);
		// 添加覆盖物
		map.addOverlay(marker);
		// 创建一个本地搜索
		var local = new BMapGL.LocalSearch(map, {
			renderOptions: {
				map: map
			}
		});

		function search(e) {
			// 表单值发生变化时候进行搜索
			local.search(e.value);
		}
	</script>
</body>

</html>

![效果](https://img-blog.csdnimg.cn/direct/86af3eb42bcd4f51b45b93498458cd52.png)