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

编程知识更新时间:2023-04-19 20:53:52

官网地址

官网的坐标拾取器，直接在需要拾取经纬度表单的地方，添加链接即可。但是在后台使用此方式，友好化不是很好。
传送门：https://lbs.qq/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/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/webApi/component/componentGuide/componentPicker](https://lbs.qq/webApi/component/componentGuide/componentPicker)

backurl调用

<a href="//apis.map.qq/tools/locpicker?search=1&type=0&backurl=https://iot.qiaodu/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);
    }