地图使用:地点关键词的输入提示

用户在搜索框输入地点的关键词,即可呈现相应的地点提示文字,将最佳的可能搜索结果以下拉列表的方式呈现给用户,提升了用户的地图搜索体验和地点查找效率。
效果如下:

一、功能介绍

关键词输入提示接口可以用于获取输入关键字的补完与提示,帮助用户快速输入。可以通过配合前端程序实现Autocomplete(自动完成)的效果。

二、密钥申请

1. 用户登录

打开腾讯位置服务主页:https://lbs.qq.com,点击右上角的登录按钮:

2. 验证信息

点击控制台,进入开发者信息界面,补全基本用户信息,完成验证。

3. 申请密钥

点击左侧key与配额下的key管理:
点击创建新密钥,填写Key名称、描述、验证码,等待审核通过:
密钥申请通过后,可以点击设置按钮修改名称及描述,并可以选择启用的产品,以及对调用规则进行限制:
同时,可以在查看配额界面查看各接口的用量情况:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,关于vue3使用百度地图关键词提示输入的问题,你可以参考以下步骤: 1. 首先,在你的Vue项目中安装百度地图JavaScript API库,可以使用以下命令: ``` npm install vue-baidu-map --save ``` 2. 然后,在你的Vue项目中引入百度地图,并且创建一个地图实例,可以使用以下代码: ``` <script> import BaiduMap from 'vue-baidu-map' export default { components: { BaiduMap }, data() { return { // 初始化地图中心坐标和缩放级别 center: { lat: 39.915, lng: 116.404 }, zoom: 15, // 初始化搜索关键词提示列表 query: '', sugList: [] } }, methods: { // 实时监听搜索框的输入值,触发关键词提示功能 handleInputChange() { const _this = this const BMap = window.BMap const ac = new BMap.Autocomplete({ input: 'suggestId', location: this.center, onSearchComplete() { _this.sugList = [] if (ac.getStatus() == BMAP_STATUS_SUCCESS) { for (let i = 0; i < ac.getResults().length; i++) { _this.sugList.push(ac.getResults()[i].keyword) } } } }) }, // 点击提示列表中的选项,更新搜索框的值 handleSugListClick(index) { this.query = this.sugList[index] } } } </script> <template> <div> <input id="suggestId" v-model="query" @input="handleInputChange"> <ul> <li v-for="(item,index) in sugList" :key="index" @click="handleSugListClick(index)">{{item}}</li> </ul> <BaiduMap :center="center" :zoom="zoom"></BaiduMap> </div> </template> ``` 3. 最后,你可以在你的Vue组件中使用input标签和ul标签展示用于输入关键词的搜索框和提示列表,并且实现关键词提示和点击提示列表项更新搜索框的功能,可以参考以下代码:

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值