腾讯地图关键字补全实例，使用jsonp解决跨域问题

最新推荐文章于 2024-04-20 11:17:06 发布

Doflamingozzz

最新推荐文章于 2024-04-20 11:17:06 发布

阅读量665

点赞数

分类专栏：前端文章标签： js jsonp javascript

本文链接：https://blog.csdn.net/qq_43308140/article/details/115189995

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

 //-------------腾讯地图关键字补全----------------------------------------------
    $(function() {
        $( "#tags" ).autocomplete({
            source: function(request,response){
                var keyword = request.term;
                var obj = [];
                $.ajax({
                    url:"https://apis.map.qq.com/ws/place/v1/suggestion",
                    type:"get",
                    async:false,//关闭异步
                    data:{
                        "key":"2GDBZ-H7IC6-JC7SB-MMQY……（使用自己的key）",
                        "keyword":keyword,
                        "region":"广州",
                        'output': 'jsonp'
                    },
                    dataType: "jsonp",//jsonp解决跨域问题
                    jsonp: "callback",
                    jsonpCallback: "map",
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    success:function(resp){
                        for(i in resp.data){
                            //此处可以根据需要自定义要显示的内容以及封装的数据
                            obj.push({
                                "label":resp.data[i].title + "("+resp.data[i].province+"-"+resp.data[i].city+"-"+resp.data[i].district+")",
                                "value":resp.data[i].title,
                                "lat":resp.data[i].location.lat,
                                "lng":resp.data[i].location.lng,
                                "nearAddr":resp.data[i].address
                            });
                            //label为提示显示的内容
                            //value为选中后补全出现在文本框中的内容
                        }
                        //将obj最为结果返回
                        response(obj);
                    }
                });
            },
            minLength:1,
            create: function () {
                $(this).data('ui-autocomplete')._renderItem = function (ul, item) {//这里使用这个回调函数生成自定义的html内容
                    return $('<li>')
                        .append("<a href='javascript:;' class='j-change-addr j-banner-nav j-near-search' data-type='selection' data-index='4' data-lat=" + item.lat + " data-lng=" + item.lng + " data-nearAddr=" + item.nearAddr + "> <div class='gray3 mb10'>" + item.value + "</div><div class='nearAddr fs12 gray9'>" + item.nearAddr + "</div> </a>")
                        .appendTo(ul);
                };
            }
        });
    });
    //-------------腾讯地图关键字补全----------------------------------------------