腾讯位置服务：拾取坐标的四种开发方式

最新推荐文章于 2024-01-31 23:17:16 发布

漏刻有时

最新推荐文章于 2024-01-31 23:17:16 发布

阅读量3.5k

点赞数 2

分类专栏：地图开发

LOCKDATAV出品，为避免断章取义走弯路，请注意环境配置和时间。

本文链接：https://blog.csdn.net/weixin_41290949/article/details/114451196

版权

地图开发专栏收录该内容

149 篇文章

订阅专栏

本文介绍了如何利用QQ地图的API在网页中实现地址与经纬度之间的转换。通过JavaScript函数getPoints自动将详细地址转化为经纬度，但若地址不详细则需要用户手动在地图上选取。此外，还提供了地图选点组件的使用方法，允许用户在地图上直接点击选取坐标，并通过backurl调用进行参数传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网地址

在这里插入图片描述
官网的坐标拾取器，直接在需要拾取经纬度表单的地方，添加链接即可。但是在后台使用此方式，友好化不是很好。
传送门：https://lbs.qq.com/tool/getpoint/index.html

地址转码

    //自動獲取經緯度;
    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);
            }
        });
    }

有点是：地址详细的话，会自动转化为对应的经纬度；
缺点是：如果地址不详细，需要二次选择经纬度。
传送门：https://blog.csdn.net/weixin_41290949/article/details/113412823

页面点选

在这里插入图片描述

//选择坐标处理
var map;
var marker;
var center = new qq.maps.LatLng(39.916527, 116.397128);
map = new qq.maps.Map(document.getElementById('map'), {
    center: center,
    zoom: 10
});

//获取城市列表接口设置中心点
citylocation = new qq.maps.CityService({
    complete: function (result) {
        map.setCenter(result.detail.latLng);
        //添加标记
        marker = new qq.maps.Marker({
            position: result.detail.latLng,
            draggable: true,
            map: map
        });
        //添加到提示窗
        var info = new qq.maps.InfoWindow({
            map: map
        });

        //绑定地图点击事件
        qq.maps.event.addListener(map, "click", function (e) {
            $("#L_lon_lat").val(e.latLng.lat + ',' + e.latLng.lng);
            //先移除标记，再添加标记
            marker.setMap(null);
            marker = new qq.maps.Marker({
                position: new qq.maps.LatLng(e.latLng.getLat(), e.latLng.getLng()),
                map: map
            });
        });
    }
});

//调用searchLocalCity();方法    根据用户IP查询城市信息。
citylocation.searchLocalCity();

地图选点组件

传送门：[https://lbs.qq.com/webApi/component/componentGuide/componentPicker](https://lbs.qq.com/webApi/component/componentGuide/componentPicker)

backurl调用

<a href="//apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=https://iot.qiaodu.net/case/didi/admin.php?m=Poi%26a=poiAdd%26act=addShow&key=您的key&referer=myweb">选择经纬度</a>

地址需要转码“&”转为“%26”，否则，带有参数的页面无法正常传参。

前端获取经纬度

    var b = decodeURIComponent(getQueryVar("latng"));
    $("#L_lon_lat").val(b);

    //获取参数;
    function getQueryVar(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }