搜索
DEDE建站

dede手机端定位失败？如何解决？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 5 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 26 分钟
位置： 首页 › DEDE建站 › 正文

这是一个非常常见的问题,主要原因在于PC端和移动端是两套独立的模板，而DEDECMS默认在移动端模板中可能没有正确调用或处理定位相关的代码。

dede网站在手机上定位问题
（图片来源网络，侵删）

问题通常表现为以下几种情况：

  1. 手机端完全无法获取定位：点击“获取当前位置”按钮没有反应。
  2. 定位失败：点击后提示“定位失败，请手动选择”。
  3. 定位显示不准确：定位到了一个完全错误的城市。
  4. 定位显示的是IP定位的城市：而不是GPS/WiFi定位的真实位置。

问题根源分析

要解决这个问题,首先要理解其背后的原理：

  1. 两套模板系统：DEDECMS在移动端访问时，会自动调用 /m/ 目录下的模板文件，如果你的PC端模板有定位功能，但 /m/ 目录下对应的移动端模板没有，那么手机端自然无法定位。
  2. 浏览器权限问题：定位功能需要用户授权，并且依赖于浏览器的 Geolocation API，如果用户拒绝授权，或者浏览器不支持（虽然现在很少见），就会失败。
  3. 缺少必要的JS库：定位功能通常需要调用第三方地图服务（如高德、百度）的JavaScript API，移动端模板可能缺少对这些API的引入。
  4. 后端接口问题：DEDECMS的定位功能通常依赖一个后台处理文件（如 plus/diy.php）来接收前端传回的经纬度，并调用地图API的“逆地理编码”服务，将坐标转换为具体的城市名称，这个接口可能在移动端调用时出现路径错误或权限问题。

解决方案（由简到繁）

请按照以下步骤逐一排查和解决：

第一步：检查并启用移动端模板

这是最常见也是最容易被忽略的原因。

dede网站在手机上定位问题
（图片来源网络，侵删）
  1. 确认移动端目录存在：检查你的网站根目录下是否有 /m/ 文件夹，这是DEDECMS存放移动端模板的地方。
  2. 检查定位相关文件：
    • 进入 /m/ 目录，找到与你当前PC端页面对应的模板文件，如果你的列表页是 list_article.htm，那么移动端对应的可能是 list_article_m.htm。
    • 打开这个移动端模板文件,查找是否包含定位相关的代码，通常这些代码在一个公共模板文件中，head.htm 或 footer.htm。
    • 对比PC端模板：打开PC端的对应模板文件（如 /templets/default/list_article.htm），找到定位功能的那部分代码，然后检查 /m/ 目录下的移动端模板是否有完全相同的代码块。

如果移动端模板没有定位代码：

  • 将PC端模板中定位相关的代码块（包括HTML、JavaScript）完整地复制并粘贴到移动端模板的相应位置。
  • 特别注意：确保复制的JS代码中的文件路径是正确的，如果PC端引用的是 {dede:global.cfg_cmspath/}/static/js/location.js，那么移动端最好也使用这个绝对路径，或者确保路径在移动端环境下是有效的。

第二步：检查并修正JavaScript代码

定位功能的核心是JavaScript,你需要检查以下几点：

  1. 地图API Key：

    • 在你的JS代码中,肯定有一行是引入地图服务的，例如高德地图：
      <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的高德地图Key"></script>
    • 问题：这个 key 是你在高德开放平台申请的，它没有区分PC和移动端，所以这个通常不是问题，但请确认这个Key是有效的，并且没有超出调用量限制。

  2. 定位API调用代码：

    dede网站在手机上定位问题
    （图片来源网络，侵删）
    • 查看调用定位的JS函数,通常是这样的：
      function getLocation() {
  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
      alert("该浏览器不支持定位功能。");
  }
}

    function showPosition(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; // 将 lat 和 lon 发送到后端进行解析 // ... }

    function showError(error) { // 根据不同的错误码提示用户 // error.PERMISSION_DENIED, error.POSITION_UNAVAILABLE, error.TIMEOUT }

    
*   **检查点**：
    *   `navigator.geolocation` 对象是否存在（现代浏览器都支持）。
    *   `getCurrentPosition` 的回调函数 `showPosition` 是否被正确定义。
    *   在 `showPosition` 函数中，代码是否将获取到的经纬度（`lat`, `lon`）正确地发送给了DEDECMS的后端处理接口（通常是 `plus/diy.php`）。

第三步：检查后端处理接口 plus/diy.php

这是DEDECMS处理表单和定位请求的核心文件。

  1. 确认文件路径：确保手机端JS代码中请求的地址是正确的，通常是 plus/diy.php。
  2. 检查文件内容：打开 /plus/diy.php 文件，查找处理定位请求的代码，通常会有一个判断 if($action == 'post') 的部分。
  3. 关键检查点：
    • 字段名匹配：在JS中，你用 POST 或 GET 方式发送的经纬度字段名（如 lat, lng），必须与 diy.php 中接收的字段名完全一致。
    • 数据库字段类型：确保你的数据库中，存储经纬度的字段（如 lat, lng）是 decimal(10,6) 或 float 类型，而不是 varchar 或 int，否则精度会丢失。
    • 逆地理编码调用：diy.php 文件在接收到经纬度后，会调用高德或百度的“逆地理编码”API（https://restapi.amap.com/v3/geocode/regeo）来获取具体地址，检查这里的请求是否正确，包括 Key 是否正确、请求参数是否完整。

第四步：处理浏览器授权和HTTPS问题

  1. HTTPS协议：

    • 非常重要！ 出于安全考虑，现代浏览器（特别是Chrome、Firefox等）只允许在 HTTPS 协议下使用 Geolocation API。
    • 如果你的网站是HTTP协议，在手机上几乎100%会定位失败。 请尽快为你的网站配置SSL证书，切换到HTTPS，这是解决定位问题的根本性步骤之一。

  2. 用户授权：

    • 当页面首次请求定位时,浏览器会弹出一个对话框，询问“是否允许此网站了解你的位置？”。
    • 如果用户点击“不允许”，那么后续任何定位尝试都会失败，你需要引导用户检查浏览器设置，手动定位权限。

一个完整的移动端定位代码示例

如果你的移动端模板完全缺失定位功能,可以参考下面的代码进行添加，这段代码整合了高德地图定位，并将结果发送给 plus/diy.php。

在移动端模板的 <head> 部分添加高德地图API：

<!-- 高德地图JS API -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的高德地图Key"></script>

在模板中需要显示定位的地方添加HTML元素：

<div class="location-area">
    <button type="button" id="get-location-btn" class="btn">获取当前位置</button>
    <input type="hidden" name="city" id="city-input" value=""> <!-- 用于提交城市名 -->
    <input type="hidden" name="lat" id="lat-input" value="">   <!-- 用于提交纬度 -->
    <input type="hidden" name="lng" id="lng-input" value="">   <!-- 用于提交经度 -->
    <span id="location-tip"></span> <!-- 用于显示提示信息 -->
</div>

在模板的底部 </body> 标签前添加JavaScript代码：

<script type="text/javascript">
document.getElementById('get-location-btn').addEventListener('click', function() {
    var btn = this;
    var tip = document.getElementById('location-tip');
    var cityInput = document.getElementById('city-input');
    var latInput = document.getElementById('lat-input');
    var lngInput = document.getElementById('lng-input');
    tip.innerHTML = '正在定位中...';
    btn.disabled = true;
    // 使用高德地图的定位插件，更稳定
    if (window.AMap) {
        AMap.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, // 是否使用高精度定位，默认:true
                timeout: 10000,          // 超时时间，默认：无穷大
                buttonPosition: 'RB',    // 定位按钮的停靠位置
                buttonOffset: new AMap.Pixel(10, 20),// 定位按钮与设置的停靠位置的偏移量
                zoomToAccuracy: true,    // 定位成功后是否自动调整地图视野到定位点
            });
            geolocation.getCurrentPosition(function(status, result) {
                btn.disabled = false;
                if (status === 'complete') {
                    // 定位成功
                    tip.innerHTML = '定位成功：' + result.addressComponent.city;
                    // 将结果填入隐藏的input中，方便表单提交
                    cityInput.value = result.addressComponent.city;
                    latInput.value = result.position.lat;
                    lngInput.value = result.position.lng;
                } else {
                    // 定位失败
                    tip.innerHTML = '定位失败，请手动选择，错误信息：' + result.message;
                }
            });
        });
    } else {
        tip.innerHTML = '地图加载失败，无法定位。';
        btn.disabled = false;
    }
});
</script>

确保你的表单提交时包含这些隐藏字段：

<form action="/plus/diy.php" method="post">
    <!-- 其他表单字段 -->
    <input type="text" name="name" placeholder="姓名">
    <!-- 上面的定位HTML代码放在这里 -->
    <button type="submit">提交</button>
    <!-- 在diy.php中需要用到这些字段 -->
    <input type="hidden" name="action" value="post">
    <input type="hidden" name="dede_fields" value="name,text;city,text;lat,decimal;lng,decimal"> // 注意这里的字段定义
    <input type="hidden" name="dede_fieldshash" value="这里生成一个hash值">
</form>

总结排查清单

遇到手机定位问题时,请按以下清单检查：

  1. [ ] 移动端模板 (/m/ 目录) 是否有定位代码？ (最常见)
  2. [ ] 网站是否使用了HTTPS协议？ (决定性因素)
  3. [ ] JavaScript中的地图API Key是否有效？
  4. [ ] plus/diy.php 文件是否能正确接收和处理经纬度数据？
  5. [ ] 数据库中存储经纬度的字段类型是否正确？
  6. [ ] 在手机浏览器上测试时，是否点击了“允许定位”的授权弹窗？

按照这个思路,绝大多数DEDECMS手机定位问题都能得到解决，如果问题依旧，请使用浏览器的“开发者工具”（F12）查看控制台是否有错误信息，这会提供最直接的线索。

-- 展开阅读全文 --
头像
织梦为何默认模板数量如此之多？
« 上一篇 01-11
C语言十进制转十六进制函数如何实现？
下一篇 » 01-11

相关文章

取消
微信二维码
支付宝二维码

目录[+]