调用百度地图API并显示在HTML中_html地图api-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_63331248/article/details/139076582

要在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文件保存到本地或上传到服务器，然后在浏览器中打开它。你应该能看到一个带有百度地图的页面，并可以根据你的代码添加的各种控件和覆盖物进行交互。