智绘城市地图：使用百度地图 API 实现智能定位

Srlua小谢

已于 2024-10-16 12:09:50 修改

阅读量2.1k

点赞数 80

分类专栏： Web 文章标签：前端 Web 百度地图

于 2024-10-16 12:03:16 首次发布

本文链接：https://blog.csdn.net/Srlua/article/details/142963306

版权

Web 专栏收录该内容

2 篇文章

订阅专栏

✨✨ 欢迎大家来访Srlua的博文（づ￣3￣）づ╭❤～✨✨

🌟🌟 欢迎各位亲爱的读者，感谢你们抽出宝贵的时间来阅读我的文章。

我是Srlua小谢，在这里我会分享我的知识和经验。🎥

希望在这里，我们能一起探索IT世界的奥妙，提升我们的技能。🔮

记得先点赞👍后阅读哦~ 👏👏

📘📚 所属专栏：Web

欢迎访问我的主页：Srlua小谢获取更多信息和资源。✨✨🌙🌙

1. 引言

在现代科技快速发展的背景下，地图应用成为日常生活中不可或缺的一部分。无论是寻找餐厅、导航到目的地，还是查看周边环境，地图服务的便捷性为我们的生活带来了极大的便利。本篇博客将带您探索如何利用百度地图 API 创建一个简单的城市地图展示应用。

2. 百度地图 API 概述

百度地图 API 是百度提供的一项服务，允许开发者将地图功能嵌入到网页或应用中。它提供了丰富的功能，包括地理编码、地图展示、标记和信息窗口等。通过 API，开发者可以轻松实现地图相关的应用。

百度地图开放平台：

百度地图-百万开发者首选的地图服务商,提供专属的行业解决方案

3. 项目需求分析

本项目的目标是创建一个简单的网页应用，通过输入城市和地址，展示对应位置的地图。我们将实现以下功能：

用户输入城市和地址。
调用百度地图 API 获取该地址的坐标。
在网页上展示该地址的地图，并标记出位置。

4. 代码实现详解

4.1 HTML 结构解析

在 HTML 部分，我们创建了一个按钮和一个用于展示地图的容器。按钮触发 JavaScript 函数，容器用于渲染地图。

<input type="button" value="显示" onclick="point('广州', '中山大学南方学院');"/>
<div id="container" style="height: 500px; width:500px;border: 1px solid #f00;"></div>

4.2 JavaScript 功能实现

在 JavaScript 部分，我们使用了百度地图的 Geocoder 对象来进行地址解析。通过 getPoint 方法获取坐标后，我们创建地图实例并设置中心点。

function point(ygh_city, ygh_adress) {
    var myGeo = new BMap.Geocoder();
    myGeo.getPoint(ygh_adress, function (point) {
        if (point) {
            var map = new BMap.Map("container");
            var point = new BMap.Point(point.lng, point.lat);
            map.centerAndZoom(point, 15);
        } else {
            alert("没有找到坐标,您可以放大您选择的地址！");
        }
    }, ygh_city);
}

4.3完整代码及运行结果


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
	</head><body>
<input type="button" value="显示" onclick="point('广州', '广州南方学院');"/><div id="container" style="height: 500px; width:500px;border: 1px solid #f00;"></div>
<script>
	function point(ygh_city, ygh_adress) {
		  /*  if (ygh_adress == "" || ygh_city == "") {
				alert("请输入具体地址！");
				return;
			}　 */　　　//确定坐标"myGeo.getPoint()"
			var myGeo = new BMap.Geocoder();
		
			myGeo.getPoint(ygh_adress, function (point) {
				if (point) {
					//document.getElementById('coordinates').value = point.lng;//document.getElementById('coordinates1').value = point.lat;
					var map = new BMap.Map("container");          // 创建地图实例
					var point = new BMap.Point(point.lng, point.lat);  // 创建点坐标
					map.centerAndZoom(point, 15);            // 初始化地图，设置中心点坐标和地图级别
			 		map.enableScrollWheelZoom();
					map.addControl(new BMap.NavigationControl());  //平移控件
					map.addControl(new BMap.ScaleControl());  //比例尺控件
					map.addControl(new BMap.OverviewMapControl());  //缩略图控件
					map.addControl(new BMap.MapTypeControl());  //电子地图的地图类型控件
					//map.setCurrentCity("石路步行街"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
					var marker = new BMap.Marker(point);
					map.addOverlay(marker);
					//位置说明提示框
					var opts = { title: '<span style="font-size:14px;color:#0A8021">我的地盘</span>' };
var infoWindow = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>你懂的</br><b>电话:</b>020-859921010</br>详情>></a></div>", opts);  // 创建信息窗口对象，引号里可以书写任意的html语句。
					map.openInfoWindow(infoWindow, map.getCenter()); 
				} else {
					alert("没有找到坐标,您可以放大您选择的地址！");
				}
			}, ygh_city);
		}	
</script>
	</body>
</html>