织梦如何添加百度地图？-织梦建站-盈思创科技

第一步：获取百度地图密钥

这是使用百度地图API的前提,没有密钥地图将无法显示。

（图片来源网络，侵删）

访问百度地图开放平台：打开浏览器，访问百度地图开放平台官网。
登录或注册账号：使用您的百度账号登录，如果没有,需要先注册一个。
进入控制台：登录后，点击右上角的“控制台”。
创建应用：
（图片来源网络，侵删）
- 在控制台左侧菜单中，找到 “应用管理” -> “我的应用”。
- 点击右上角的 “创建应用” 按钮。
- 应用名称：给您的应用起一个名字，我的织梦网站地图”。
- 应用类型：选择 “浏览器端”。
- 启用服务：确保勾选了 “JavaScript API” 和 “浏览器定位服务” (如果需要定位功能)，对于普通展示，只勾选 JavaScript API 即可。
- Referer白名单：这是最关键的一步！在这里填写您网站的域名。
  - 如果您的网站是 http://www.example.com，就填写 http://www.example.com/* 和 https://www.example.com/* (如果支持HTTPS)。
  - 如果是本地测试，可以填写 http://localhost/* 或 file:///*。
  - *星号 `` 是通配符，表示该域名下的所有路径**。
获取AK：创建成功后，您会看到一个应用列表，点击您刚刚创建的应用，即可看到 访问密钥，这就是您的 AK,请务必复制并妥善保存这个AK。

第二步：在织梦后台创建自定义表单

我们需要一个地方来存储地址信息,最方便的方法就是使用织梦的自定义表单功能。

进入自定义表单管理：登录织梦后台，在左侧菜单栏找到 “核心” -> “频道模型” -> “自定义表单”。
创建新表单：点击 “增加自定义表单” 按钮。
（图片来源网络，侵删）
填写表单信息：
- 表单名称：填写一个易于识别的名称，company_location。
- 表单提示：可以留空或填写一些说明。
- 默认表单模板：可以留空,我们稍后会手动创建模板。
- 列表表单模板：可以留空。
- 发布栏目：选择一个合适的栏目来存放提交的表单数据，或者创建一个专门的“联系我们”栏目。
- ：这是最重要的部分，在这里定义地图需要的信息字段。
  - 字段名：address (地址)
  - 字段类型：单行文本
  - 保存后,再添加一个字段。
  - 字段名：lng_lat (经纬度)
  - 字段类型：单行文本 (我们将在前台通过百度地图拾取工具手动填写)
- 字段排列：可以调整字段的显示顺序。
生成表单并保存：填写完所有信息后，点击 “保存” 按钮,织梦会自动生成相关的数据表。

第三步：创建表单前台模板

这个模板用于在前台显示一个可以填写地址并提交的表单。

进入模板管理：在后台找到 “模板” -> “自定义模板”。

创建模板文件：点击 “增加自定义模板”。

模板名称：company_location.htm
：将下面的代码复制进去。

<form name="myform" action="/plus/diy.php" enctype="multipart/form-data" method="post">
    <input type="hidden" name="action" value="post" />
    <input type="hidden" name="diyid" value="{dede:global.diyid/}" />  <!-- 这个值会自动填充 -->
    <input type="hidden" name="do" value="2" />
    <div class="form-group">
        <label for="address">公司地址：</label>
        <input type="text" name="address" id="address" class="form-control" placeholder="请输入详细地址" required />
    </div>
    <div class="form-group">
        <label for="lng_lat">经纬度：</label>
        <input type="text" name="lng_lat" id="lng_lat" class="form-control" placeholder="请在下方地图中点击获取" readonly />
    </div>
    <!-- 地图容器 -->
    <div id="map" style="width: 100%; height: 400px; margin-bottom: 15px;"></div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>
<!-- 引入百度地图JS API，请将 YOUR_AK 替换成您自己的密钥 -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"></script>
<script type="text/javascript">
    // 初始化地图
    var map = new BMap.Map("map");
    var point = new BMap.Point(116.404, 39.915); // 默认中心点（北京天安门）
    map.centerAndZoom(point, 15);
    // 开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
    // 创建一个标记
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    // 添加点击事件
    map.addEventListener("click", function(e){
        // 获取点击位置的经纬度
        var lng = e.point.lng;
        var lat = e.point.lat;
        // 更新标记位置
        marker.setPosition(e.point);
        // 将经纬度填入表单
        document.getElementById("lng_lat").value = lng + "," + lat;
        // 也可以尝试根据经纬度获取地址（逆地理编码）
        var geoc = new BMap.Geocoder();
        geoc.getLocation(e.point, function(rs){
            var addComp = rs.addressComponents;
            var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
            document.getElementById("address").value = address;
        });
    });
</script>

修改AK：将上面代码中的 YOUR_AK 替换为您在第一步获取的真实密钥。
保存模板：点击 “保存”。
关联表单和模板：回到 “自定义表单” 列表页，点击您创建的 company_location 表单后面的 “更改” 或 “管理” 按钮。在 “默认表单模板” 一栏，选择刚刚创建的模板 /templets/default/company_location.htm。保存设置。

第四步：在前台页面调用地图

您需要在前台的某个页面（例如联系我们页面）来显示这个提交表单。

创建或编辑页面：在后台找到 “栏目” -> “添加栏目” 或 “自由列表”，创建一个名为“联系我们”的页面。
插入表单代码：在页面内容编辑器中，切换到 “代码” 模式,然后插入以下代码：
```
{dede:diyform name='company_location'/}
```
- name='company_location' 中的 company_location 必须和您在第二步创建的自定义表单的表单名称完全一致。
生成页面并预览：保存页面，然后点击 “更新HTML” 或 “生成”。前往您网站的这个页面，您应该能看到一个包含输入框、地图和提交按钮的表单，点击地图,地址和经纬度会自动填入。

第五步：在前台页面只显示地图（静态展示）

如果您只是想在某个页面上展示一个静态的、不可交互的地图（比如公司位置），而不需要用户提交,方法更简单。

使用百度地图生成器：
- 访问百度地图生成器。
- 在地图上拖动到您的公司位置,或者直接在搜索框输入地址。
- 设置地图的宽度和高度。
- 勾选 “允许拖拽”、“允许滚轮缩放” 等您需要的功能。
- 点击 “获取代码”。
获取代码并修改：您会得到一段包含 <script> 和 <div> 的代码，将 <script> 标签里的 ak 值换成您自己的密钥。

插入到织梦模板：

打开您想要显示地图的页面模板（contact.htm）。
在需要显示地图的位置，将生成器给您的 <div id="mapContainer" ...></div> 这部分代码粘贴进去。
将 <script> 部分的代码也粘贴到页面底部，</body> 标签之前。

示例代码：

<!-- 在页面的 body 中您想显示地图的位置插入这个 div -->
<div id="mapContainer" style="width: 100%; height: 500px;"></div>
<!-- 在 </body> 标签前插入这段 JS -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"></script>
<script type="text/javascript">
    var map = new BMap.Map("mapContainer");
    var point = new BMap.Point(116.404, 39.915); // 这里换成您的公司经纬度
    map.centerAndZoom(point, 15);
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    map.enableScrollWheelZoom();
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
</script>

交互式地图（用户可点击定位）：通过 自定义表单 + 自定义模板 的方式实现，功能强大,适合需要收集用户位置信息的场景。
静态展示地图（仅展示固定位置）：通过 百度地图生成器 快速获取代码，然后嵌入到织梦模板中，简单快捷,适合展示公司地址等固定信息。

希望这份详细的教程能帮助您成功在织梦网站上添加百度地图！如果在操作过程中遇到问题,可以随时提问。

织梦如何添加百度地图？

第一步：获取百度地图密钥

第二步：在织梦后台创建自定义表单

第三步：创建表单前台模板

第四步：在前台页面调用地图

第五步：在前台页面只显示地图（静态展示）

相关文章

目录[+]