百度Map-0、入门-1.1

最新推荐文章于 2025-06-15 16:30:23 发布

原创最新推荐文章于 2025-06-15 16:30:23 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图

前端技术专栏收录该内容

105 篇文章

订阅专栏

有时候我们需要展示我们的地点，那肿么办呢？我们可以用到百度地图。有它在手，说走就走，啦啦啦。

怎么能有我们自己的地图呢。你可以直接找百度地图开放平台。要不然你就慢慢看我嘚瑟。(́ಢ.◞౪◟ಢ‵)哟哟哟。

首先你要有个百度的密钥。账号和获取密钥。自己去申请哦。然后开始我们的操作。

1、创建页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 要防止手机版用户缩小整页面的操作 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
    <div id="container" style="height: 500px; width: 500px"></div>

    <script src="http://api.map.baidu.com/api?v=2.0&ak=密钥哦，我就不告诉你我的密钥&callback=回调函数，这里我用initMap哦"></script>
    <script src="baiduMap.js"></script>
</body>
</html>

2、回调函数

function initMap() {
    var mp = new BMap.Map('container'); //container是被加入的id
    var point = new BMap.Point(114.223466,22.73045); //中心点坐标，这个是百度地图上的坐标哦
    mp.centerAndZoom(point, 19); //初始化并设置展示的级别，越大展示内容越少，更详细
}