百度地图采集经纬度坐标数据定位的javascript实战开发(地理坐标拾取系统、地址定位点选插件、实时定位、数据导入、地理编码、位置纠偏)

news2025/4/13 22:36:46

坐标采集

  • 前言
  • 1.百度地图地理坐标拾取系统
  • 2.位置选择插件
    • 百度地图经纬度选择插件
    • 默认参数配置
  • 3.数据导入
  • 4.地理编码
    • 爬取百度webAPI
    • 返回参数
    • 前端封装转换函数
  • 5.手机GPS定位
    • GPS定位
  • 6.位置纠偏
    • html容器
    • 经纬度纠偏

前言

在百度地图的标注开发中,最为关键的操作就是经纬度坐标信息的拾取。在不同的应用场景,坐标的拾取方式不同。现就常见的地理坐标拾取系统、地址定位点选插件、手机端GPS实时定位、数据导入、地理编码、位置纠偏等做全面的介绍。

1.百度地图地理坐标拾取系统

传送门:http://api.map.baidu.com/lbsapi/getpoint/index.html

在百度地图官方输入对应的地址或坐标,可以进行地理坐标之间的相互转化。
在这里插入图片描述

2.位置选择插件

在项目开发中,可以做弹窗跳转到官方地址拾取,也可以在官方提供的jsAPI的基础上进行二次开发,封装成单独的位置选择插件。如下:
在这里插入图片描述

百度地图经纬度选择插件

该插件可实现地址定位、关键词搜索和标注移动选择位置,并自动获取经纬度坐标数据信息、省、地、市等地址信息。在页面开发中,使用封装函数进行自动填充即可。

    /*百度地图经纬度选择插件*/
    $(function () {
        $("#L_lnglat").baidumapaddress({
            dobackcall: function (address, wgs, baidu) {
                //console.log("地址:" + address);
                $("#L_poi_province").val(address.split(" ")[0]);
                $("#L_poi_city").val(address.split(" ")[1]);
                $("#L_poi_county").val(address.split(" ")[2]);
                $("#L_poi_address").val(address.split(" ")[3]+address.split(" ")[4]);
            }
        });
    });

默认参数配置

  //配置参数
    var defaults = {
        lng: '',
        lat: '',
        marker: null,
        mapid: '',
        bdlng: 0,
        bdlng: 0,
        address: '',
        city: "杭州市",
        title: '地图选点',
        dobackcall: null,
    };

3.数据导入

在这里插入图片描述
在项目完成测试后,如果遇到成千上百的地址时,一个一个的拾取,好像不是一个合格的开发者的所为。此时,就需要使用到地址解析和逆解析的API接口,即:在数据导入到数据库的过程中,自动批量地将地址转化为经纬度坐标,满足前端的调用。
在这里插入图片描述

注意事项:
excel中若提供经纬度的,将会在地图精准定位。但要选对您经纬度数据的所属坐标系。
excel中若提供地名地址去地图查找定位,位置精确度依赖于您所提供地名地址信息的完整性、同时也依赖于百度或高德地图所含地址信息的全面性。因此,如果您所提供的部分地址导入后未能在地图上准确定位,属于正常现象。对此功能有苛刻要求的,请勿用。

提示:有大量记录的excel,建议拆分成每个1000个以内分次导入。

批量地理编码参考资料:《python对接API二次开发高级实战案例解析:百度地图Web服务API封装函数(行政区划区域检索、地理编码、国内天气查询、IP定位、坐标转换)》

4.地理编码

在这里插入图片描述

爬取百度webAPI

用户可通过该功能,将结构化地址(省/市/区/街道/门牌号)解析为对应的位置坐标。地址结构越完整,地址内容越准确,解析的坐标精度越高。

注意事项:

  • 待解析的地址。最多支持84个字节。可以输入两种样式的值,分别是:1、标准的结构化地址信息,如北京市海淀区上地十街十号【推荐,地址结构越完整,解析精度越高】2、支持“路与路交叉口”描述方式,如北一环路和阜阳路的交叉路口第二种方式并不总是有返回结果,只有当地址库中存在该地址描述时才有返回。
  • 误差说明:
    描述打点绝对精度(即坐标点的误差范围)。
    confidence=100,解析误差绝对精度小于20m;
    confidence≥90,解析误差绝对精度小于50m;
    confidence≥80,解析误差绝对精度小于100m;
    confidence≥75,解析误差绝对精度小于200m;
    confidence≥70,解析误差绝对精度小于300m;
    confidence≥60,解析误差绝对精度小于500m;
    confidence≥50,解析误差绝对精度小于1000m;
    confidence≥40,解析误差绝对精度小于2000m;
    confidence≥30,解析误差绝对精度小于5000m;
    confidence≥25,解析误差绝对精度小于8000m;
    confidence≥20,解析误差绝对精度小于10000m;
/*地址转坐标封装函数,文件名称为points.php
*$address,需要转化的地址,越详细经纬度精度越高;
 */
<?php 
    // 此处填写你在控制台-应用管理-创建应用后获取的AK
    $ak = '您的AK';
    
    // 发起一个http get请求,并返回请求的结果
    // $url字段为请求的地址
    // $param字段为请求的参数
    function request_get($url = '', $param = array()) {
        if (empty($url) || empty($param)) {
            return false;
        }
        
        $getUrl = $url . "?" . http_build_query($param);
        $curl = curl_init(); // 初始化curl
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); // 跳过证书检查   
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 2); // 从证书中检查SSL加密算法是否存在
        curl_setopt($curl, CURLOPT_URL, $getUrl); // 抓取指定网页
        curl_setopt($curl, CURLOPT_TIMEOUT, 1000); // 设置超时时间1秒
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); // curl不直接输出到屏幕
        curl_setopt($curl, CURLOPT_HEADER, 0); // 设置header
        $data = curl_exec($curl); // 运行curl

        if (!$data) {
            print("an error occured in function request_get(): " . curl_error($curl) . "\n");
        }

        curl_close($curl);
        
        return $data;
    }

    // 请求地址
    $url = 'https://api.map.baidu.com/geocoding/v3';
    
    // 构造请求参数
    $param['address']   = '北京市海淀区上地十街10号';
    $param['output']   = 'json';
    $param['ak']   = $ak;
    $param['callback']   = 'showLocation';

    $res = request_get($url, $param);

    // 将原始返回的结果打印出来
    print("请求的原始返回结果为:\n");
    print($res . "\n");
?>

返回参数

{
    "status": 0,
    "result": {
      "location": {
        "lng": 116.30762232672,
        "lat": 40.056828485961
      },
      "precise": 1,
      "confidence": 80,
      "comprehension": 100,
      "level": "门址"
    }
  }

前端封装转换函数

    //自動獲取經緯度;
    var getAddress = function transAddress() {
        var address = $("#address").val();
        getPoints(address);
    }

    //前端页面输出;
    function getPoints(address) {
        $.getJSON("points.php", {address: address}, function (res) {
            if (res.status == 0) {
                $("#lng").val(res.result.location.lng);
                $("#lat").val(res.result.location.lat);
            } else {
                $("#message").html(res.message);
            }
        });
    }

在输入地址数据的时候,一定要是省市区街道门牌号,地址越详细精度越高,否则会解析不出来,谨记!

5.手机GPS定位

在这里插入图片描述
手机自带GPS定位,通过BMap.Geolocation类,在手机访问页面时,允许使用自动定位功能。则系统会自动调用定位信息,并将纬度坐标数据信息、省、地、市等地址信息自动填入表单中。同时,页面的标注可以自由拖动,实现手动调整,让定位更加精准。

GPS定位

//自动定位;
        function bdGeo() {
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    //var mk = new BMap.Marker(r.point);
                    map.clearOverlays();
                    map.panTo(r.point);
                    console.log(r.address);
                    $("#L_poi_province").val(r.address.province);
                    $("#L_poi_city").val(r.address.city);
                    $("#L_poi_county").val(r.address.district);
                    $("#L_lnglat").val(r.point.lng+","+r.point.lat);
                    var points=new BMap.Point(r.point.lng, r.point.lat);
                    //返回当前中心点;
                    map.centerAndZoom(points, 16);
                    //添加标注;
                    var marker = new BMap.Marker(points);
                    map.addOverlay(marker);
                    marker.enableDragging();
                    marker.addEventListener('dragend', function () {
 $("#L_lnglat").val(marker.getPosition().lng+","+marker.getPosition().lat)
                    })}
                else {
                    alert('failed' + this.getStatus());
                }
            },function (error) {
                console.log(error);
            },{
                enableHighAccuracy: true,//是否要求高精度的地理位置信息
                timeout: 1000,//对地理位置信息的获取操作做超时限制,如果再该事件内未获取到地理位置信息,将返回错误
                maximumAge:0//设置缓存有效时间,在该时间段内,获取的地理位置信息还是设置此时间段之前的那次获得的信息,超过这段时间缓存的位置信息会被废弃
            });
        }

6.位置纠偏

位置纠偏,是所有定位后的后台调整功能,给予管理员或数据管理员审核POI点位的修复。
在这里插入图片描述

html容器

<div class="x-body">
    <form class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">经纬度信息</label>
                <div class="layui-input-inline"><input type="text" name="points" id="points" lay-verify="required" autocomplete="off" class="layui-input" value="113.351986,23.159751"></div><input type="hidden" id="poi_id" value="4211">
                <button class="layui-btn" lay-filter="add" lay-submit="" id="L_add" type="submit">确定提交</button> * 拖动标注即可自动纠偏</div>
            </div>
        </div>
        <div id="l-map"></div>
    </form>
</div>

经纬度纠偏

    // 百度地图API功能
    var map = new BMap.Map("l-map");
    var point = new BMap.Point(113.351986, 23.159751);
    map.centerAndZoom(point, 17);
    map.enableScrollWheelZoom(true);
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    marker.enableDragging();
    marker.addEventListener('dragend', function () {
        //console.log(marker.getPosition().lat);
        $("#points").val(marker.getPosition().lng+","+marker.getPosition().lat)
    })

@漏刻有时

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/474776.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

华硕主板来电开机自启

重启电脑&#xff0c;开机按del或者F2进入bios 按F10保存确认即可

浏览器跨站点通信(两个IP不同网站通信)

需求场景&#xff1a;OA系统会通过接口调用的方式将ERP系统的待办信息获取并显示在OA系统中。登录OA系统后&#xff0c;在OA系统中点击ERP系统的待办&#xff0c;会自动打开ERP系统业务处理页面&#xff0c;当ERP系统对应业务处理完毕&#xff0c;需要在OA系统中刷新待办记录&a…

【环境配置】解决No module named ‘librosa‘

执行以下命令下载 pip install librosa我这里遇到了报错&#xff1a; Microsoft Visual C 14.0 or greater is required. Get it with “Microsoft C Build Tools”: https://visualstudio.microsoft.com/visual-cpp-build-tools/ 相关解决方案请参考&#xff1a; 【环境配置…

Python渗透测试编程基础——线程、进程与协程

目录 一、进程与线程的概念 1.进程 2.线程 3.进程和线程的关系 4.任务执行方式 二、Python中的Threading模块 1.线程模块介绍 2.Threading介绍 &#xff08;1&#xff09;方法和属性 &#xff08;2&#xff09;类方法 三、线程简单编写 1.流程 2.创建线程 &#x…

云原生技术在云计算中的应用探讨

第一章&#xff1a;云原生技术的概念与发展 云原生技术是一种针对云计算环境设计的应用程序开发和部署方法&#xff0c;主要目标是提高应用程序的可伸缩性、可移植性、高可用性和自动化管理等方面的特性。这种技术是近年来在云计算领域兴起的一个新的开发模式&#xff0c;它主要…

大模型“涌现”的思维链,究竟是一种什么能力?

听说最近AI大厂的开发人员和高校的NLP研究人员&#xff0c;都在琢磨&#xff0c;怎么让大模型“涌现”。那画面莫名就让我想到了程序员给服务器上香来保佑不宕机&#xff0c;都有种求诸于天的玄学。 所谓“涌现”,在大模型领域指的是当模型突破某个规模时&#xff0c;性能显著提…

商城管理系统的数据表从属关系+navicat建表操作+数据库文件转储并入代码操作

1&#xff0c;商城管理系统的数据表从属关系 在商城管理系统中&#xff0c;我们会面临属性分组的问题&#xff0c;商品表与分类表需要建立链接&#xff1b; 在控制类中我们将分类表中属性类传过来&#xff0c;与商品值params建立链接 public R list(RequestParam Map<Strin…

基于matlab使用波束成形对点对点 MIMO-OFDM 系统进行建模

一、前言 此示例展示了如何使用波束成形对点对点 MIMO-OFDM 系统进行建模。最近的无线标准&#xff08;如 802.11x 系列&#xff09;采用了多输入多输出 &#xff08;MIMO&#xff09; 和正交频分复用 &#xff08;OFDM&#xff09; 技术的组合&#xff0c;以提供更高的数据速率…

万字长文 - Nature 综述系列 - 给生物学家的机器学习指南 2 (传统机器学习方法如何选择)...

万字长文 - Nature 综述系列 - 给生物学家的机器学习指南 1 传统的机器学习 我们现在讨论几种关键的机器学习方法的优势和劣势。表1显示了不同机器学习方法的比较。我们首先讨论不基于神经网络的方法&#xff0c;有时被称为“传统机器学习”。 图3显示了一些传统的机器学习方法…

【算法基础】常见排序算法(持续更新中)

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;【C/C】算法 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵 希望大佬指点一二 如果文章对你有…

【KVM虚拟化】· 图形化KVM安装linux

目录 &#x1f341;虚拟化技术 &#x1f342;KVM的整体结构 &#x1f342;KVM 的功能列表 &#x1f342;KVM 工具集合 &#x1f341;安装kvm虚拟化功能 &#x1f341;创建虚拟机 &#x1f990;博客主页&#xff1a;大虾好吃吗的博客 &#x1f990;专栏地址&#xff1a;KVM虚拟化…

FreeRTOS 信号量(二) ------ 计数型信号量

文章目录 一、计数型信号量1. 计数型信号量简介2. 创建计数型信号量①函数 xSemaphoreCreateCounting()②函数 xSemaphoreCreateCountingStatic() 3. 计数型信号量创建过程分析4. 释放和获取计数信号量 二、计数型信号量操作实验 一、计数型信号量 1. 计数型信号量简介 有些资…

数据结构与算法(小议递归)

文章目录 前言一、递归是什么&#xff1f;二、在什么时候适用递归1.测试一下 总结 前言 递归是一种常用的算法设计&#xff0c;递归就是一种循环推理。简单来说就是调用原算法本身的算法。 这里主要探讨递归的使用&#xff0c; 一、递归是什么&#xff1f; 用一个简单的例子来…

嵌入式代码查看分析利器---Understand

平时在开发嵌入式程序的时候大多数使用的都是keil软件&#xff0c;一般小的工程使用keil没感觉到有什么问题&#xff0c;但是当工程比较大的时候&#xff0c;比如移植了FreeRTOS系统或者LWIP网络系统时&#xff0c;代码全部编译一次就要花费很长世间&#xff0c;特别是开启了点…

CIKM论文解读 | 淘宝内容化推荐场景下对多场景全域表征的思考与应用

我们结合逛逛推荐场景中的具体问题&#xff0c;从多场景全域表征的视角进行了一系列的探索与内容推荐场景的应用&#xff0c;从全域表征的范围、信息迁移方式以及模型框架的应用等维度展开我们的优化工作&#xff0c;取得了阶段性的优化经验和业务效果。 背景介绍 淘宝逛逛自20…

鸿蒙混合打包。在现有安卓应用的基础上扩展鸿蒙的特性,以最快的速度布局鸿蒙生态!

鸿蒙混合打包 介绍 鸿蒙混合打包。在现有安卓应用的基础上扩展鸿蒙的特性&#xff0c;以最快的速度布局鸿蒙生态&#xff01; 参考&#xff1a;京东APP鸿蒙版上架实践。本项目只是这篇文章的一个验证&#xff0c;让更多的兄弟们可以少走弯路。 我尽可能把每一步的改动作为一…

【HarmonyOS】【JS】Tabs如何设置区分TabBar和TabContent的分割线不显示

【关键字】 Tabs&#xff0c;分割线 【问题描述】 使用JS开发HarmonyOS应用时&#xff0c;使用Tabs组件&#xff0c;默认自带TabBar和TabContent的蓝色分割线&#xff0c;由于蓝色分割线样式不可设置&#xff0c;若不想要此蓝色分割线&#xff0c;如何去除蓝色分割线&#xf…

搭建外网minecraft服务器方案

很多minecraft服务器主都想自己搭建一个外网可以访问的minecraft服务器&#xff0c;在没有外网IP的情况下&#xff0c;一般都是使用Logmein Hamachi方案。这种方案有它的弊端&#xff0c;需要客户机安装Hamachi&#xff0c;十分不方便。另外&#xff0c;免费版只支持5人&#x…

C++三大特性—继承 “基类与派生类之间的类型转换与赋值转换”

理解基类与派生类之间的类型转换是理解C语言面向对象编程的关键所在 继承 通过继承联系在一起的类构成一种层次关系&#xff0c;层次关系的根部有一个基类&#xff0c;其他直接或间接从基类继承而来&#xff0c;称为派生类。    继承(inheritance)机制是面向对象程序设计使代…

Spring RabbitMQ 实现消息队列延迟

1.概述 要实现RabbitMQ的消息队列延迟功能&#xff0c;一般采用官方提供的 rabbitmq_delayed_message_exchange插件。但RabbitMQ版本必须是3.5.8以上才支持该插件&#xff0c;否则得用其死信队列功能。 2.安装RabbitMQ延迟插件 检查插件 使用rabbitmq-plugins list命令用于查看…