前端百度地图申请密钥注意点

最新推荐文章于 2025-12-03 10:13:28 发布

原创最新推荐文章于 2025-12-03 10:13:28 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Javascript API #IP白名单 #浏览器端 #百度地图 #申请密钥

本文介绍如何使用百度地图API创建一个简单的地图应用。通过浏览器端应用示例，展示如何利用JavaScript API初始化地图、设置中心点及缩放级别。适用于前端开发者快速上手百度地图服务。

1、应用类型：浏览器端

2、启用服务：Javascript API要勾选

3、IP白名单：*即可

主要是注意根据官网上上面的注意事项，避免踩坑

如果不行的话，那就试试如下代码，开始玩吧

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的密钥">
    </script>
</head>

<body>
<div id="container"></div>
<script type="text/javascript">
    var map = new BMap.Map("container");
    // 创建地图实例
    var point = new BMap.Point(116.404, 39.915);
    // 创建点坐标
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(true);
    // 初始化地图，设置中心点坐标和地图级别
</script>
</body>
</html>