梅林枝繁叶茂，一派生机盎然。日光暖暖融融地照耀下来，铺满了一地金黄。那抹夕阳下，你永远是最美的风景。
本文实例为大家分享了vue用BMap百度地图实现即时搜索功能的具体代码，供大家参考，具体内容如下
功能如下：
搜索框搜索---自动下拉---点击数据---数据显示在搜索框里---点击新增--数据显示在下方--点击删除--删除当前
代码：
首先去百度开发者申请一个key
然后将key引入到项目的 index.html：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>
下面是组件代码：
<template>
<div id="app">
<el-form label-width="200px">
<el-form-item label="包含小区" required class="housing_input">
<el-input id="suggestId" v-model="city" placeholder="请输入小区名称" name="address_detail" />
<div id="allmap"/>
<el-button @click="add_housing">新增</el-button>
<div v-for="(item,index) in add_housing_list" :key="index" class="housingList">
<span>{{item}}</span>
<el-button class="delete_button" @click="delete_housing(index)">删除</el-button>
</div>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'demo',
data(){
return{
city: '',
address_detail: null, //详细地址
add_housing_list: ["阿里巴巴"],
}
},
mounted() {
this.getcity()
},
methods:{
getcity(){
this.$nextTick(function() {
var th = this
// 创建Map实例
var map = new BMap.Map('allmap')
// 初始化地图,设置中心点坐标，
var point = new BMap.Point(120.211877, 30.255194) // 创建点坐标，汉得公司的经纬度坐标
map.centerAndZoom(point, 15)
map.enableScrollWheelZoom()
var ac = new BMap.Autocomplete( // 建立一个自动完成的对象
{
'input': 'suggestId',
'location': map
})
var myValue
ac.addEventListener('onconfirm', function(e) { // 鼠标点击下拉列表后的事件
var _value = e.item.value //获取点击的条目
myValue = _value.province + _value.city + _value.district + _value.street + _value.business //地址拼接赋给一个变量
th.city = myValue //将地址赋给data中的city
// console.log(th.city)
setPlace()
})
// console.log(ac.pc.input)
function setPlace() {
map.clearOverlays() // 清除地图上所有覆盖物
function myFun() {
th.userlocation = local.getResults().getPoi(0).point // 获取第一个智能搜索的结果
map.centerAndZoom(th.userlocation, 18)
map.addOverlay(new BMap.Marker(th.userlocation)) // 添加标注
}
var local = new BMap.LocalSearch(map, { // 智能搜索
onSearchComplete: myFun
})
local.search(myValue)
// 测试输出坐标（指的是输入框最后确定地点的经纬度）
map.addEventListener('click', function(e) {
// 经度
console.log(th.userlocation.lng)
// 纬度
console.log(th.userlocation.lat)
})
}
},)
},
// 新增小区 点击的地址增加进list
add_housing() {
this.add_housing_list.push(this.city)
},
// 删除小区
delete_housing(index) {
// console.log(index)
this.add_housing_list.splice(index, 1)
},
}
}
</script>
<style scoped>
.housingList{
margin-top:20px;
}
.delete_button{
color: #409EFF;
text-decoration: underline;
border:none;
background:#fff;
cursor: pointer;
margin-left:20px;
}
.el-input{
width: 800px;
}
.housing_input .el-input{
width: 730px;
}
#allmap{
width: 400px;
height: 400px;
font-family: "微软雅黑";
display: none;
}
</style>
本文vue用BMap百度地图如何实现即时搜索功能到此结束。寂寞的人总是会用心的记住他生命中出现过的每一个人，于是我总是意犹未尽地想起你在每个星光陨落的晚上一遍一遍数我的寂寞。小编再次感谢大家对我们的支持！
