在网页中嵌入地图（如谷歌地图）是常见的前端开发技术之一，它为网站增加了交互性和可视化效果，提升了用户体验。本文将介绍如何使用开放地图API在网页中嵌入地图，并提供详细的指导和示例代码。
什么是开放地图？
开放地图是一种通过公开接口实现在线地理信息服务的软件，它提供了地图数据、POI搜索、路线规划等功能，可以帮助开发者在自己的应用中嵌入地图功能而无需进行底层地图数据处理。其中，谷歌地图是最知名的开放地图之一，大多数用户都已经熟悉并使用过。
如何在网页中嵌入地图？
第一步：获取 API Key
要使用开放地图API，在谷歌地图官网上需要申请一个API Key。具体操作步骤如下：
- 登录 Google Cloud Console；
- 创建或选择项目；
- 在左侧导航栏中选择“API 和服务” - “Dashboard”；
- 点击“启用 API 和服务”；
- 搜索并启用“Maps JavaScript API”；
- 在左侧导航栏中选择“API 和服务” - “凭据”；
- 点击“创建凭据”，选择“API 密钥”；
- 在“HTTP引用（网站）”下方的“添加受信任的来源”中输入自己网站的域名或IP地址；
- 复制生成的API Key。
第二步：在网页中嵌入地图
- 在 HTML 页面中添加一个容器元素，用于显示地图；
- 引入谷歌地图的 JavaScript API，代码如下：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
- 初始化地图对象，并指定位置和缩放级别，代码如下：
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 39.9042, lng: 116.4074 },
zoom: 8,
});
}其中，“map”是容器元素的 ID，“lat”和“lng”表示地图的中心点坐标，zoom 表示地图的缩放级别。
- 调用
initMap函数，初始化地图，代码如下：
google.maps.event.addDomListener(window, "load", initMap);
第三步：添加标记和信息窗口
为了让地图更加生动、丰富，我们可以在地图上添加标记和信息窗口。代码如下：
-- -------------------- ---- -------
-------- --------- -
----- ------ - - ---- -------- ---- -------- --
----- --- - --- ----------------------------------------------- -
-------
----- --
---
----- ------ - --- --------------------
--------- -------
----
------ -----
---
----- ------------- -
----- ---------------------------------------------------
----- ---------- - --- ------------------------
-------- --------------
---
--------------------------- -- -- -
-------------------- --------
---
-
---------------------------------------- ------- ---------其中，“marker”表示标记对象，内容包括位置、地图和标题等属性。信息窗口通过“infowindow”定义，并在点击标记时打开。
总结
网页嵌入地图是一项有深度的前端技术，开放地图API提
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14678