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

 //-------------腾讯地图关键字补全----------------------------------------------
    $(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);
                };
            }
        });
    });
    //-------------腾讯地图关键字补全----------------------------------------------
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值