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

最新推荐文章于 2024-07-26 16:20:58 发布
最新推荐文章于 2024-07-26 16:20:58 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： 路在何方-前端 文章标签： ajax javascript jquery 街景地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35240824/article/details/106834116
版权
本文介绍了在开发中使用腾讯地图API实现输入关键字自动补全功能的过程。首先尝试使用JavaScript API，但发现搜索结果不理想且存在错误。接着转向使用WebService API，遇到跨域问题，通过修改AJAX请求解决了该问题。最后，通过添加jsonp参数成功获取所需数据，并完成了关键字补全功能的实现。文章中还提及了数据类型转换在处理多个参数时的重要性。
摘要由CSDN通过智能技术生成

很荣幸开心大家与这篇文章的相遇~！这也是我从业两年第一次写文章，废话不多说了，首先呢，有个功能是表单项输入关键字【海南】会出来：如下图：
输入关键字海南示例
首先我想到的是利用官方网址的JavaScript API，官网地址：https://lbs.qq.com/webDemoCenter/javascriptV2/libraries/placeLibrary
在这里插入图片描述然后我我复制了里面的示例代码研究了很久，终于通了，但得到的地址不是自己想要的那种效果：如下图，不仅搜索的结果不太丰富，js还抛出很多错误在这里插入图片描述这结果不是我想要的，所以我再查一下腾讯地图官网，发现服务端有个WebService API 可以通过get请求获取json响应结果，而且数据还挺好看，所以决定就通过webService,于是通过ajax请求如下：在这里插入图片描述

最低0.47元/天 解锁文章
Lv_i
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
VSCode配置golang开发环境
yonggeit的博客
01-17 9095
VSCode 插件推荐 插件安装方法 按下 Ctrl/Cmd+P 输入 ext install [插件关键字 / 名称]，就可以安装了。 下面提供各个插件对应的安装命令。 各语言插件 Go: ext install ms-vscode.Go Golang 开发必备插件 Docker: ext install PeterJausovec.vscode-docker Docker 语法高亮...
运维知识点-linux操作系统-linux命令行-BashShell
aming小老弟
11-17 519
Yum（全称为 Yellow dog Updater, Modified）是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器。基于RPM包管理，能够从指定的1、显示已经安装的软件包2、查找可以安装的软件包 （以 tomcat 为例）3、安装软件包 （以 tomcat 为例）4、卸载软件包 （以 tomcat 为例）5、列出软件包的依赖 （以 tomcat 为例）6、-y 自动应答yes我们可以用 -y 来应答所有的 yes , 比如我们安装 tomcat 的时候，
腾讯地图关键字智能提示搜索
小小码农biubiubiu
07-15 1589
前言 开发者在开发诸如地点检索或行程推荐的系统，这时候用户常常需要对地址信息进行输入检索，提供关键词输入提示功能的话，将有助于用户快速查找地址，提高搜索的体验感。利用腾讯地图提供的接口可以快速的实现智能化的输入提示。具体的实现方法见下文。 一、功能介绍 关键词输入提示接口可以用于获取输入关键字的补完与提示，帮助用户快速输入。可以通过配合前端程序实现Autocomplete（自动完成）的效果。 二、密钥申请 1. 用户登录 打开腾讯位置服务主页：https://lbs.qq.com，点击右上角的登录按钮：
腾讯地图的输入提示
qq_38109249的博客
03-12 627
腾讯地图的输入提示 $.ajax({ type: 'get', async : false, dataType:"jsonp", url: "https://apis.map.qq.com/ws/place/v1/suggestion?output=jsonp", data : { region:"全国", keyword:t...
腾讯地图突然就不能跳转到输入的位置了
最新发布
Edwin_jade的博客
07-26 424
2、变更后的api （请求地址）需要缴费。1、腾讯地图接口有变更。
谈腾讯地图web api如何实现类似百度地图内置的城市切换、关键字输入提示功能
chuangxin的专栏
03-19 4325
PC WEB端新增客户的时候需要填写客户地址和联系人信息，包括：省市区、街道、详细地址和经纬度以及联系人、固话和移动电话。获取客户地址信息之前用的是百度地图，由于小程序中客户拜访时，需要对客户进行定位、距离计算，所以客户经纬度都转换成了gcj02坐标。由于之前的百度地图经纬度坐标是百度自己坐标，因此需要获取经纬度时进行坐标转换，根据坐标点在百度地图上显示时需要二次转换，所以打算将百度地图替换成腾讯地图。本文讨论基于腾讯地图如何实现类似百度地图的城市切换、关键字搜索提示功能。
asp.net 中实现录入时提示 (web service + js 实现 )
weixin_34144450的博客
05-08 54
  效果如下... 调用页面  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><HTML>    <HEAD>        <TITLE></TITLE>        <META content="Microsoft Visual St
腾讯地图 - 关键词输入提示（结尾附视频）
腾讯位置服务
07-14 800
文章目录 腾讯位置 - 关键词输入提示（结尾附视频） 一、功能介绍 二、密钥申请 用户登录 验证信息 申请密钥 密钥配置 三、操作步骤 开发文档入口 接口测试 返回结果 四、使用案例 基础界面 动态响应 完整案例源码 五、视频直达 一、功能介绍 关键词输入提示接口可以用于获取输入关键字的补完与提示，帮助用户快速输入。可以通过配合前端程序实现Autocomplete（自动完成）的效果。 二、密钥申请 ...
基于腾讯地图的输入自动提示与补全功能
@宝儿姐
07-21 746
当用户在地图的搜索框输入地点的关键词时，此时搜索框下拉列表将会有相关词供用户选择，即根据输入文本片段即显示相关的匹配信息，节省了用户的输入成本。 一、功能介绍 关键词输入提示接口可以用于获取输入关键字的补完与提示，帮助用户快速输入。可以通过配合前端程序实现Autocomplete（自动完成）的效果。 二、密钥申请 1. 用户登录 打开腾讯位置服务主页：https://lbs.qq.com，点击右上角的登录按钮： 2. 验证信息 点击控制台，进入开发者信息界面，补全基本用户信息，完成验证。 3. 申请密钥
一份前端工程师快速接入GO语言语法指南(上)
前端攻城狮Dannis
11-14 1517
一份前端工程师快速接入GO语言语法直男指南 如果你对行业风向比较关注的话, 我相信你对go一定是不陌生的, 作为近几年频频露脸大放异彩的21世纪C语言, go华服加身（熹妃回宫~）, 当然, 作为一名前端, 不论是为了让自己的职业道路更加宽广(搞更多的钱), 还是为了要让自己的技术栈更加丰富, KOA node这种级别的语言已经不足以让我们停下脚步, 如果想要成为全栈或者架构, 一门或多门服务端语言的学习与掌握不可避免, 而go这两年又这么红, 所以笔者这里提供一本葵花宝典(不正经前端学习go基本语法指南)
面试知识点总结
03-11 4039
就是水各大面经，然后自己总结下啦，怕忘QAQ1.介绍一下信号量和互斥锁信号量 互斥锁 条件变量的区别信号量用在多线程多任务同步的，一个线程完成了某一个动作就通过信号量告诉别的线程，别的线程再进行某些动作（大家都在semtake的时候，就阻塞在哪里）。而互斥锁是用在多线程多任务互斥的，一个线程占用了某一个资源，那么别的线程就无法访问，直到这个线程unlock，其他的线程才开始可以利用这个资源。比如对全
Python3.7爬取腾讯地图关键词位置及电话信息
愤怒的小兵
10-02 4643
朋友创业需要拓展客户，闲来无事帮朋友搞些数据，网上看到的全是爬取百度地图的数据，无奈百度地图AK一直申请不来，便摸索着做个腾讯地图的小爬虫，些许小感慨：数据时代，共享无限，隐私难藏啊！ 实现功能 通过指定关键词，自动搜索腾讯地图全国范围内的相关位置及电话信息，并将结果输出至指定Excel文件。 开发环境 Python 3.7，腾讯地图AK 实现原理 首先获取全国城市列表，并根据输入关键...
腾讯地图-new qq.maps.place.Autocomplete在弹框中不显示的问题
蒲小若的博客
03-21 1369
近期做了这么一个需求：需要在弹框搜索和选取地图定位，然后我发现，使用new qq.maps.place.Autocomplete“不显示”下拉选项的问题 如图： 刚开始我以为是没有请求到数据，然后看了network，发现是有数据返回的 再后来我发现 其实下拉选项是有渲染的 最终找到原因是：下拉选项的元素的z-index要低于弹框的zindex，于是把下拉选项的z-index设置的弹框的z-index大就可以了 最终效果为： 最后附上代码 /* eslint-dis
腾讯地图 使用autocomplete自动化完成 带搜索联想
后生丶的博客
06-21 3594
//html中需要引入腾讯地图api <script charset="utf-8" type="text/javascript" src="http://map.qq.com/api/js?v=2.exp&key=YOURKEY&libraries=place"></script> <div class="info-list cle
vue3使用腾讯地图（关键词搜索，地址获取经纬度，标记位置）
weixin_52164116的博客
10-27 3072
vue3使用腾讯地图（关键词搜索，地址获取经纬度，标记位置）
vue autocomplete_vue接入腾讯地图
weixin_39905226的博客
10-22 476
vue接入腾讯地图 最近在使用vue接入腾讯地图也是饱受折磨，因为本身对vue就不是很会，借此机会能好好学学vue。里面代码可能有的地方会有不妥之处，后面会改进的一、接入腾讯地图首先在马上开始接入 - 入门指南 | 腾讯位置服务​lbs.qq.com，这里面申请一个key效果图如下1、在vue里面的index.html中引用地图<2、在vue页面中写如下代码里面代码包含了，当前定位信息...
使用腾讯地图SDK的自动补全功能
BlueLzy的个人博客
02-17 2885
说明 本文只使用了腾讯地图的 自动提示 功能 本文只使用了腾讯地图的 自动提示 功能 本文只使用了腾讯地图的 自动提示 功能 其他2D，3D，地图街景等功能请自行查阅官方文档 另外，如果想用高德地图的朋友 请看我的上一篇博客：使用高德地图SDK的自动补全功能 一、集成腾讯地图SDK 1.集成检索SDK有两种方法 - 基于AS，使用Eclipse的童鞋请参考官方文档 使用 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值