# 网站如何调用嵌入百度地图小白教程

*Published:* 2024-09-04
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2024年9月4日，已超过 180天没有更新


> 这篇教程适合小白和不太懂代码的个人站长，建站高手可以略过。

[百度地图](https://www.xarjtc.com/tag/%e7%99%be%e5%ba%a6%e5%9c%b0%e5%9b%be "查看百度地图此标签更多文章")API是一套为开发者提供的基于百度地图的应用程序接口，包括JavaScript、iOS、Andriod、静态地图、Web服务等多种版本，提供基本地图、位置搜索、周边搜索、公交驾车导航、定位服务、地理编码及逆地理编码等丰富功能。LBS·云是百度地图针对LBS开发者全新推出的平台级服务。通过地图API，一方面解决移动开发者服务器端日益增长的海量位置数据的存储维护压力，另一方面彻底解决所有LBS开发者基于位置数据的高并发检索瓶颈。

一、注册百度地图API‌（申请百度地图API秘钥AK）
---------------------------

首先，需要在百度地图开放平台注册账号并创建应用，以获取API密钥（AK）。这是使用百度地图API服务的必要步骤，用于验证和授权应用访问地图服务。

打开百度地图开放平台，网址是https://lbsyun.baidu.com/

有账号的可以直接登录，没有账号的，点击注册，申请一个账号，填写自己相关资料即可。

点击“控制台”进入后台，点击导航栏的“应用管理”--&gt;“我的应用”--&gt;“创建应用”

[![](https://www.xarjtc.com/wp-content/uploads/2024/09/cffe6b74cc93a43.webp)](https://www.xarjtc.com/wp-content/uploads/2024/09/cffe6b74cc93a43.webp)

“应用名称”是给这个应用取个名字，用你网站名字和个人名字都可以，方便记忆就行。

“应用类型”里选择浏览器端，如果你有APP，可以选择服务器端；如果有做微信小程序，可以选择微信小程序。对于多数中小企业和个人网站来说，没有做APP和小程序，基本上是在浏览器端展示网页的，所以选择浏览器端够用了。

“启用服务”里保持默认的，但是要记住“JavaScript API”是必须要选的。

[![](https://www.xarjtc.com/wp-content/uploads/2024/09/81146245066f41e.webp)](https://www.xarjtc.com/wp-content/uploads/2024/09/81146245066f41e.webp)

“Referer白名单”里，把自己网站域名填写进去，如果有多个网站页面要调用地图坐标，可以把其他网站域名填写进去。如果不想限制任何网站域名，填写英文星号。里面有详细的说明，按照说明填写即可。

以上填写好，点击“提交”，自动生成访问应用AK。第一次提交会审核时间长些，在3个小时左右，后面在提交地图坐标应用，基本上不再审核，直接通过了。

二、拾取公司坐标经度和维度
-------------

这一步要获取公司在百度地图上的经度和维度坐标地址。

打开拾取坐标系统网址：

推荐：http://api.map.baidu.com/lbsapi/getpoint/index.html

不推荐：http://jingweidu.757dy.com/

进入自己城市地图，找到公司位置，点击一下，在右上角会出现地址坐标的经度和维度数值，把数字保存下来。如果你的公司或者店铺地址地图没有收录，无法在地图上显示公司名字，可以在周边找个建筑物地址点击一下，也能生成经度和维度数值。

[![](https://www.xarjtc.com/wp-content/uploads/2024/09/3e0bbbb15c9c3b1.webp)](https://www.xarjtc.com/wp-content/uploads/2024/09/3e0bbbb15c9c3b1.webp)

三、制作公司地址地图坐标页面
--------------

对于懂代码的小伙伴，到这一步，基本就能用html写一个这样的页面。但是，肯定有很多不懂代码的朋友，百度地图给了简单实用的源代码，简单修改后，可以直接复制使用。

打开百度地图开发者网址：https://lbsyun.baidu.com/jsdemo.htm#eAddMarker

给出了以首都建筑物的参考代码，在源代码编辑器里可以直接设置；

把“您的秘钥”修改成你申请获得的秘钥；

在“创建点标记”里，把经度和维度数值修改成获得的数值。

把地图层级默认的“15”，可以改成17，或者18，把多余的3个位置坐标删除，点击“运行”，查看具体效果。

[![](https://www.xarjtc.com/wp-content/uploads/2024/09/bd1c67257363fa1.webp)](https://www.xarjtc.com/wp-content/uploads/2024/09/bd1c67257363fa1.webp)

确定没问题了，把修改后的代码，整个复制下来，粘贴到TXT文本里，用字母或者数字命名，比如companymap，然后把文档后缀改为html，自动转换成网页文件。

网页调用地图坐标系统

使用FTP软件，把companymap.html文件上传到空间服务器合适位置，并记住文件的绝对路径。

使用下面iframe标签代码，远程调用companymap.html文件。在代码里，设置好地图文件的绝对路径，调整显示的宽度和高度，代码如下：

```
<iframe style="border:none;" src="地图文件的绝对路径" width="100%" height="600px" frameborder="0" scrolling="no"></iframe>
```

调整好后，把代码复制下来。

打开网站某个需要显示地图位置的页面，切换到代码模式，把该代码粘贴到合适位置，保存设置。

打开这个页面，就能显示公司地址在地图上面的位置了。

四、示例代码
------

下面是美化后的全部代码，修改里面的秘钥AK、经度、维度数值，以及公司信息，保存成html文件，通过iframe代码调用改页面即可。

```


<html>

<head>

<meta charset="utf-8">

<!-- 适应移动端页面展示 -->

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<title>网站调用地图坐标</title>

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的秘钥AK"></script>

<style type="text/css">

/* 设置容器样式 */

#dituContent {

height: 600px;

width: 100%;

}

.mapContent {

width: 240px;

height: 100px;

position: relative;

top: -30px;

}

.BMap_bubble_content {

overflow: visible !important;

}

.mapContent .title {

width: 100%;

font-size: 18px;

color: #333;

font-weight: 600;

}

.mapContent .main {}

.mapContent .main p {

margin: 0;

padding: 0;

}

</style>

</head>

<body>

<!-- 地图容器 -->

<div id="dituContent"> </div>

<script type="text/javascript">

var longitude = '117.307712'; //经度

var latitude = '31.869903'; //纬度

// 创建图文信息窗口

var sContent = `

<div class="mapContent">

<div class="title">

我的公司名字

</div>

<div class="main">

<p>联系人:某先生</p>

<p>联系方式:XXXXXX</p>

<p>详细地址:我的具体位置</p>

</div>

</div>`;

// 创建地图实例

var map = new BMapGL.Map("dituContent");

// 设置中心点坐标

var point = new BMapGL.Point(longitude, latitude);

// 地图初始化，同时设置地图展示级别

map.centerAndZoom(point, 15);

//开启鼠标滚轮缩放

map.enableScrollWheelZoom(true);

// 创建添加点标记

var marker = new BMapGL.Marker(point);

map.addOverlay(marker);

// 创建信息窗口对象

var infoWindow = new BMapGL.InfoWindow(sContent);

// 打开信息窗口

map.openInfoWindow(infoWindow, map.getCenter());

// marker添加点击事件

marker.addEventListener('click', function() {

this.openInfoWindow(infoWindow);

// 图片加载完毕重绘infoWindow

document.getElementById('imgDemo').onload = function() {

infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏

};

})

</script>

</body>

</html>
```