将百度地图的在线地图控件嵌入到页面指定位置,怎么嵌入,完整代码
时间: 2024-09-22 18:01:57 浏览: 201
将百度地图的在线地图控件嵌入到页面中,首先你需要在百度地图开放平台注册并获取API密钥,然后按照官方文档的指示进行。以下是基本的步骤:
1. 注册并获取API:访问百度地图开发者中心(https://lbsyun.baidu.com/),创建账号并申请地图API Key 和 AK/SK(AppKey/Secret Key)。
2. 添加地图控件:在HTML页面中,引入百度地图的JS库。一般推荐使用CDN,添加`<script>`标签如下:
```html
<script src="https://api.map.baidu.com/api?v=3.0&ak=<your_api_key>"></script>
```
替换 `<your_api_key>` 为你获取的AK。
3. 创建地图实例:在JavaScript中初始化地图,设置容器ID作为地图的宿主元素:
```javascript
var map = new BMap.Map("containerId");
```
其中 "containerId" 是你在HTML里对应的id,比如 `<div id="containerId"></div>`。
4. 设置地图中心和缩放级别:
```javascript
map.centerAndZoom(new BMap.Point(116.39, 39.9), 15); // 北京为中心,15级放大
```
完整的代码示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>百度地图</title>
<!-- 引入百度地图API -->
<script src="https://api.map.baidu.com/api?v=3.0&ak=<your_api_key>"></script>
</head>
<body>
<div id="containerId" style="width: 100%; height: 600px;"></div>
<script>
var map = new BMap.Map("containerId");
map.centerAndZoom(new BMap.Point(116.39, 39.9), 15);
</script>
</body>
</html>
```
记得替换 `<your_api_key>` 为你的实际API Key。这是一个基础的嵌入示例,后续你可以根据需要添加自定义样式、地图事件监听等功能。
阅读全文
相关推荐


















