要在HTML中调用并显示百度地图API,你需要遵循以下步骤:
注意:确保你的API密钥是保密的,不要将其暴露在公共的代码库或网站中。在生产环境中,你可能需要将API密钥存储在服务器端的配置文件中,并通过安全的方式将其传递给客户端代码。
-
获取API密钥:
首先,你需要在百度地图开放平台注册账号并创建应用,以获取API密钥(AK)。这个密钥是调用百度地图API的凭证。 -
在HTML中引入百度地图API:
在HTML文件的<head>
标签中,通过<script>
标签引入百度地图API的JavaScript文件,并带上你的API密钥作为参数。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度地图API示例</title> <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的API密钥"></script> </head> <body> <!-- 地图容器 --> <div id="mapContainer" style="width: 100%; height: 500px;"></div> <script type="text/javascript"> // 在这里编写初始化地图的代码 </script> </body> </html>
初始化地图:
在<script>
标签中编写JavaScript代码,用于初始化地图。你需要创建一个BMap
对象,并为其指定一个中心点坐标、缩放级别和地图容器。 -
<script type="text/javascript"> // 百度地图API功能 window.onload = function() { // 创建地图实例 var map = new BMap.Map("mapContainer"); // "mapContainer"是HTML中地图容器的id var point = new BMap.Point(116.404, 39.915); // 初始化地图,设置中心点坐标和地图级别 map.centerAndZoom(point, 15); // 可选:添加地图控件 // 例如:缩放控件 var ctrl_nav = new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE, enableGeolocation: true }); map.addControl(ctrl_nav); // 例如:比例尺控件 var ctrl_scale = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrl_scale); // 其他地图控件和覆盖物(如标记、折线、多边形等) // ... }; </script>
-
添加地图控件和覆盖物:
你可以根据需求添加各种地图控件(如缩放控件、比例尺控件等)和覆盖物(如标记、折线、多边形等)。这些控件和覆盖物都可以使用百度地图API提供的类和方法来创建和配置。 -
调试和测试:
将HTML文件保存到本地或上传到服务器,然后在浏览器中打开它。你应该能看到一个带有百度地图的页面,并可以根据你的代码添加的各种控件和覆盖物进行交互。