腾讯地图输入关键字自动补全的应用及遇到的问题详解

很荣幸开心大家与这篇文章的相遇~!这也是我从业两年第一次写文章,废话不多说了,首先呢,有个功能是表单项输入关键字【海南】会出来:如下图:
腾讯地图输入关键字自动补全的应用及遇到的问题详解_第1张图片
首先我想到的是利用官方网址的JavaScript API,官网地址:https://lbs.qq.com/webDemoCenter/javascriptV2/libraries/placeLibrary
腾讯地图输入关键字自动补全的应用及遇到的问题详解_第2张图片然后我我复制了里面的示例代码研究了很久,终于通了,但得到的地址不是自己想要的那种效果:如下图,不仅搜索的结果不太丰富,js还抛出很多错误腾讯地图输入关键字自动补全的应用及遇到的问题详解_第3张图片这结果不是我想要的,所以我再查一下腾讯地图官网,发现服务端有个WebService API 可以通过get请求获取json响应结果,而且数据还挺好看,所以决定就通过webService,于是通过ajax请求如下:腾讯地图输入关键字自动补全的应用及遇到的问题详解_第4张图片在这里插入图片描述出现问题了!!说什么拦截跨域,于是我搜索一些解决跨域的文章,最终改成如下ajax:
腾讯地图输入关键字自动补全的应用及遇到的问题详解_第5张图片测试一看!SyntaxError: unexpected token: ':'啥玩意这是。。。
在这里插入图片描述于是我有捣鼓了很久,查了一下地图V1库以前的获取版本,发现有一个请求参数&output=jsonp,添加一看,发现竟然可以获取正常了,我的天!
腾讯地图输入关键字自动补全的应用及遇到的问题详解_第6张图片
输入关键字【海南】
腾讯地图输入关键字自动补全的应用及遇到的问题详解_第7张图片后面通过html片段拼接函数οnclick=()函数的时候传多个数据过去的时候,小心数据类型的转换就行啦,这个功能就开发完啦,哈哈,第一次写,语言有些乱,多多包含,如果错误,望批评指正!!!(本文为个人原创,如有转载,请标明出处!!谢谢)

你可能感兴趣的:(路在何方-前端,ajax,javascript,jquery,街景地图)