Vue百度地图关键字提示输入Autocomplete（uni-app H5）

短命女 2023-02-17 02:19 14阅读 0赞

官方demo：[http://lbsyun.baidu.com/jsdemo.htm\#a6\_2][http_lbsyun.baidu.com_jsdemo.htm_a6_2]

官方API：[http://lbsyun.baidu.com/cms/jsapi/reference/jsapi\_webgl\_1\_0.html\#a8b50][http_lbsyun.baidu.com_cms_jsapi_reference_jsapi_webgl_1_0.html_a8b50]

只上关键代码：

var map = new BMap.Map('l-map'); 
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
            var ac = new BMap.Autocomplete({
                //建立一个自动完成的对象
                input: this.$refs.suggestInput.$el.querySelector('input'),
                location: map,
                onSearchComplete: (e) => {
                    console.log(e);
                },
            });

关键代码：**this.$refs.suggestInput.$el.querySelector('input')**

拿到搜索结果列表即可：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70][]

[http_lbsyun.baidu.com_jsdemo.htm_a6_2]: http://lbsyun.baidu.com/jsdemo.htm#a6_2
[http_lbsyun.baidu.com_cms_jsapi_reference_jsapi_webgl_1_0.html_a8b50]: http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a8b50
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200610190354213.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU=,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中使用百度地图

首先，看看[官方文档][Link 1]，然后投入使用，先看效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

心已赠人/ 2023年05月22日 04:57/ 0 赞/ 22 阅读

相关 Vue百度地图关键字提示输入Autocomplete（uni-app H5）

官方demo：[http://lbsyun.baidu.com/jsdemo.htm\a6\_2][http_lbsyun.baidu.com_jsdemo.htm_a6_2]

短命女/ 2023年02月17日 02:19/ 0 赞/ 15 阅读

相关百度地图关键字输入提示并增加标注-BMap.Autocomplete

Autocomplete 集成百度地图并支持关系字输入提示，主要用到的是BMap.Autocomplete，方法调用如下： ![在这里插入图片描述][watermar

Bertha 。/ 2022年11月10日 05:35/ 0 赞/ 279 阅读

相关 vue 引入百度地图

注意vue文件中调用地图，在mounted中调用无用时候，要在this.$nextTick()方法中调用，如下 this.$nextTick(() => \{

小咪咪/ 2022年10月30日 11:24/ 0 赞/ 259 阅读

相关百度地图

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></

电玩女神/ 2022年10月01日 03:58/ 0 赞/ 441 阅读

相关 vue 百度地图调用

vue百度地图插件 [https://dafrok.github.io/vue-baidu-map/\/zh/search/local-search][https_dafro

￡神魔★判官ぃ/ 2022年04月23日 08:18/ 0 赞/ 361 阅读

相关 vue引入百度地图

1.创建一个vue项目输入指令 npm install vue-baidu-map –-save 2.在index.html 里面引入 <script type

雨点打透心脏的1/2处/ 2021年11月27日 07:14/ 0 赞/ 410 阅读

相关 vue 百度地图气泡图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3

╰+哭是因爲堅強的太久メ/ 2021年10月01日 04:30/ 0 赞/ 731 阅读

相关 vue中引入百度地图

方法一：通过cdn引入一，申请密匙（[http://lbsyun.baidu.com/apiconsole/key?application=key\/home

系统管理员/ 2021年07月25日 14:46/ 0 赞/ 708 阅读

相关 h5 输入提示框

输入框提示列表 input的list属性必须和datalist的id属性相同，才能有输入提示框 datalist中的内容将会被隐藏代码示例:

缺乏、安全感/ 2021年07月24日 14:35/ 0 赞/ 492 阅读