无第三方包的Django用户经纬度存储到用户档案实现方案

核心开发需求 #

• 技术选型原则：完全不依赖第三方地理相关封装包，避免现有同类包版本迭代滞后、强依赖外部地理API、版本升级后极易出现项目代码兼容失效的问题
• 功能实现目标：基于原生HTML5 Geolocation API + JavaScript采集访客/登录用户的经纬度数据，通过AJAX完成前后端数据交互，将采集到的数据传输到Django后端，完成后续数据处理与数据库持久化存储
• 功能应用场景：
  • 网站首页基于用户所在区域展示对应天气信息
  • 用户登录后在个人页面展示本地化的Twitter热门趋势内容
• 当前开发现状与待打通环节：
  • 已可基于HTML5 Geolocation API完成前端经纬度采集逻辑
  • 对AJAX的掌握程度不足以独立完成前后端数据交互逻辑，需要配套完整实现方案
  • 需打通经纬度从前端采集到后端接收、处理、存储的全链路，支持按字典/JSON/字符串约定格式完成数据传输

已完成的前置前端代码 #

当前已基于HTML5 Geolocation API 编写基础采集逻辑，代码如下：

// 全局结果展示元素变量
var result;

function showPosition() {
    // 绑定页面中用于展示采集结果的DOM元素
    result = document.getElementById("result");

    // 检测浏览器是否支持地理定位能力
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
        result.innerHTML = "正在获取位置信息...";
    } else {
        alert("抱歉，你的浏览器不支持HTML5地理定位功能。");
    }
}

// 定位成功的回调逻辑
function successCallback(position) {
    result.innerHTML = [position.coords.latitude, position.coords.longitude];
}

// 定位失败的回调逻辑
function errorCallback(error) {
    if (error.code == 1) {
        result.innerHTML = "你选择不共享位置信息，我们不会再次请求你的位置权限。";
    } else if (error.code == 2) {
        result.innerHTML = "网络连接异常或定位服务无法访问。";
    } else if (error.code == 3) {
        result.innerHTML = "位置获取超时。";
    } else {
        result.innerHTML = "地理定位发生未知错误。";
    }
}

window.onload = showPosition;

内容的提问来源于stack exchange，提问作者Feramonics