腾讯地图关键字补全实例，使用jsonp解决跨域问题
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了腾讯地图关键字补全实例，使用jsonp解决跨域问题，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1542字，纯文字阅读大概需要3分钟。
内容图文
//-------------腾讯地图关键字补全----------------------------------------------
$(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);
};
}
});
});
//-------------腾讯地图关键字补全----------------------------------------------
内容总结
以上是互联网集市为您收集整理的腾讯地图关键字补全实例，使用jsonp解决跨域问题全部内容，希望文章能够帮你解决腾讯地图关键字补全实例，使用jsonp解决跨域问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】