百度地图使用

一枚平平无奇的冲浪者

于 2024-01-03 14:27:49 发布

阅读量528

点赞数 9

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_45272615/article/details/135363004

版权

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

摘要由CSDN通过智能技术生成

<!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)

一枚平平无奇的冲浪者

关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫