百度地图开发者平台的使用

sh2001824

关注

最新推荐文章于 2026-01-28 14:30:11 发布 · 5k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

Android Studio 开发百度地图开发教程本文讲解在Android Studio中使用百度地图进行开发项目。阅读详情

我们在做地图的时候不太可能自己去写一个地图，所以我们就用到了百度地图的开发平台

1、在浏览器中搜索百度地图开发者平台

2、进入网站找到开发者文档并进入JavaScript API 中（如果没有百度账号请注册因为要用到）

3.进入之后找到示例DEMO

4.进入示例DEMO找到自己想要的地图样式

5.进入想要的地图中复制代码

6.更改自己的密钥

这个密钥在-控制台-应用管理-我的应用-访问应用（AK）就是密钥（要是没有就先创建应用就会出来了）

7.更改完成之后就可以运行了（*vscode要在服务器运行）

需要安装插件（Live Server）

代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>地图展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        
        .info {
            z-index: 999;
            width: auto;
            min-width: 22rem;
            padding: .75rem 1.25rem;
            margin-left: 1.25rem;
            position: fixed;
            top: 1rem;
            background-color: #fff;
            border-radius: .25rem;
            font-size: 14px;
            color: #666;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=yDvNVctRwaAGn8CFSm6pvGP7r3GbHWWl"></script>
</head>

<body>
    <div class="info">最新版GL地图命名空间为BMapGL, 可按住鼠标右键控制地图旋转、修改倾斜角度。</div>
    <div id="container"></div>
</body>

</html>
<script>
    var map = new BMapGL.Map('container'); // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
</script>

效果：