调用腾讯API 地图组件

发布于 2020-10-23  152 次阅读


一、注册key

  • 先去官网注册一个账号 https://lbs.qq.com
  • 注册完成后点击控制台创建一个自己的一个key
  • key 的名称自己设置 最后使用英文名字,
  • 勾选 WebServiceApi 设置以下授权ip

api-设置

  • 点击保存即可

    二、前台调用

    这里我用的是前台选点组件
    具体请参考:腾讯地图组件
    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
    <style type="text/css">
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    </head>
    <body>
    
    <input type="button" value="aa" id="btn">
    </body>
    </html>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
    $(function () {
        $("#btn").click(function () {
            var url = window.location.href;
            console.log(url);
            window.location.href = "https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=" + url + "&key=your key&referer=gwweb";
        }) // key:自己的key填写进去 ,referer表示自己的key的名称
    
        function UrlSearch() {
            var name, value;
            //var str = location.href; //取得整个地址栏
            //注意 因为返回地址栏参数有中文,所以我们用decideurl 来获取
            var str = decodeURI(location.href)  //地址栏中文参数不会乱码
            console.log(str);
            var num = str.indexOf("?")
            str = str.substr(num + 1); //取得所有参数   stringvar.substr(start [, length ]
    
            var arr = str.split("&"); //各个参数放到数组里
            for (var i = 0; i < arr.length; i++) {
                num = arr[i].indexOf("=");
                if (num > 0) {
                    name = arr[i].substring(0, num);
                    value = arr[i].substr(num + 1);
                    this[name] = value;
                    console.log(arr[i]);
                }
            }
        }
        var Request = new UrlSearch(); //实例化
        console.log(Request.addr);
    })
    </script>
  • 上面截取地址栏参数来获取位置,具体更多用法参考腾讯官网 地图组件