本文实例为大家分享了某视频剪辑软件用骨髓酸性磷酸酶百度地图实现即时搜索功能的具体代码，供大家参考，具体内容如下

功能如下：

搜索框搜索-自动下拉-点击数据-数据显示在搜索框里-点击新增-数据显示在下方-点击删除-删除当前

代码：

首先去百度开发者申请一个键

然后将键引入到项目的index.html:

脚本类型=' text/JavaScript ' src=' http :http://API。地图。百度。com/API？v=2.0ak=你的键/脚本下面是组件代码：

模板div id=' app ' El-表单标签-宽度=' 200像素' El-表单-项目标签='包含小区必选类=' housing _ input ' El-input id=' improved ' v-model=' city '占位符='请输入小区名称name=' address _ detail '/div id=' all map '/El-button @ click=' add _ housing '新增/El-button div-for=' add _ housing _ list ' : key=' index ' class=' housing list ' span { { item } }/span El-button class=' delete _ button ' @ click=' delete _ housing(index)'删除/El-button/div/El-form-item/El-form/div/template脚本导出默认值{ name : ' demo '，data(){ return { city 3360 ' '，address_detail: null，//详细地址add_housing_list: ['阿里巴巴]，} }，mounted() { this.getcity() }，methods:{ getcity(){ this . $ NextTick(function(){ var th=this//创建地图实例var映射=新的BMap .Map('allmap') //初始化地图，设置中心点坐标，var点=新的BMap .点(120.211877,30.255194) //创建点坐标，汉得公司的经纬度坐标map.centerAndZoom(点地图。enablescrolwhelzoom()var AC=new BMap .自动完成(//建立一个自动完成的对象{ 'input': '暗示，' location ' : map })var myValue AC。addeventlistener(' onconfirm '，函数(e) { //鼠标点击下拉列表后的事件var _value=e.item.value //获取点击的条目myValue=_value。省得_ VaLue。city _ VaLue。学区_ VaLue。street _ VaLue。商业/地址拼接赋给一个变量th.city=myValue //将地址赋给数据中的城市//控制台。日志(th。city)setPlace()})//控制台。日志(交流。个人电脑。输入)函数setPlace(){ map。清除覆盖()//清除地图上所有覆盖物函数我的乐趣。用户位置=本地。getresults().getPoi(0).点/获取第一个智能搜索的结果地图。居中并缩放(th。用户位置，18) map.addOverlay(新BMap .标记(th.userlocation)) //添加标注} var local=新的BMap .LocalSearch(地图，{ //智能搜索onsearchccomplete : my fun })本地。搜索(我的值)//测试输出坐标（指的是输入框最后确定地点的经纬度)map.addEventListener('click '，函数(e) { //经度控制台。日志(th。用户位置。液化天然气)//纬度控制台。日志(th。用户位置。lat)})}，)}，//新增小区点击的地址增加进list add _ housing(){ this。add _ housing _ list。推(这个。城市)}，//删除小区delete _ housing(index){//console。记录(索引)这个。add _ housing _ list。拼接(索引，1) }，}/脚本样式范围。housing list { margin-top :20 px；}.delete _ button { color : # 409 eff；文本修饰：下划线；border:none背景# fffcursor:指针；左边距left:20px}。El-输入{宽度： 800 px} .外壳输入El-输入{宽度： 730 px} # allmap { width: 400px高度： 400像素；字体系列： '微软雅黑；显示器：无；}/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。