先看图
然后点确定，居然下拉框又被触发了，而且在添加页面各种输入框只要一输入文字就会触发地图下拉框展示，很恶心的一个bug，不知道有没有人遇到过。
从百度api贴 的代码，自己有根据需求修改过，大致一样
return document.getElementById(id)
}
var ac = new BMap.Autocomplete( // 建立一个自动完成的对象
{
'input': 'suggestId',
'location': map
}
)
ac.addEventListener('onhighlight', function(e) { // 鼠标放在下拉列表上的事件
var str = ''
var _value = e.fromitem.value
var value = ''
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business
}
str = 'FromItem<br />index = ' + e.fromitem.index + '<br />value = ' + value
value = ''
if (e.toitem.index > -1) {
_value = e.toitem.value
value = _value.province + _value.city + _value.district + _value.street + _value.business
}
str += '<br />ToItem<br />index = ' + e.toitem.index + ' <br />value = ' + value
G('searchResultPanel').innerHTML = str
})
var myValue
ac.addEventListener('onconfirm', function(e) { // 鼠标点击下拉列表后的事件
var _value = e.item.value
myValue = _value.province + _value.city + _value.district + _value.street + _value.business
G('searchResultPanel').innerHTML = 'onconfirm<br />index = ' + e.item.index + '<br />myValue = ' + myValue
setPlace()
})
function setPlace() {
map.clearOverlays() // 清除地图上所有覆盖物
function myFun() {
var pp = local.getResults().getPoi(0).point // 获取第一个智能搜索的结果
map.centerAndZoom(pp, 18)
map.addOverlay(new BMap.Marker(pp)) // 添加标注
console.log(pp)
console.log('获取位置具体地址经纬度', 'lng' + pp.lng + 'lat' + pp.lat)
addLng = pp.lng
addLat = pp.lat
// 经纬度赋值到页面
var jing_du = document.getElementById('jing_du')
var wei_du = document.getElementById('wei_du')
jing_du.innerHTML = addLng + ','
wei_du.innerHTML = addLat
}
var local = new BMap.LocalSearch(map, { // 智能搜索
onSearchComplete: myFun
})
local.search(myValue)
console.log('获取位置具体地址', myValue)
}虽然能实现需求，但这个触发的弹框真的很无奈，后面经过同事提醒，结合类参考http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a7b0，
然后自己写了个搜索框，我是采用的vue+elementUI，具体代码如下：
html
<el-form-item label="详细地址">
<div id="r-result">
<el-autocomplete
width="100%"
size="small"
popper-class="my-autocomplete"
v-model="shopaddress"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
:trigger-on-focus="false"
@select="handleSelect">
<template slot-scope="{ item }">
<div class="name">{{ item.address}}</div>
<span class="addr">{{ item.address }}</span>
</template>
</el-autocomplete>
</div>
<template v-if="ruleForm.longitude && ruleForm.latitude">
<div>
<span id="jing_du">
{{ruleForm.longitude}}
</span>
<span id="wei_du">
{{ruleForm.latitude}}
</span>
</div>
</template>
<div id="l-map"></div>
</el-form-item>script
export default {
name: 'shopManage_add',
data() {
return {
listLoading: true,
ruleForm: {
address: '',
longitude: '', // 经度
latitude: '', // 纬度
},
map: null,
local: null,
localList: [], // 搜索地址列表
shopaddress: '', // 详细地址
loading: false,
restaurants: []
}
},
watch: {
shopaddress(val) {
this.local.search(val)
}
},
mounted() {
this.map = new BMap.Map('l-map')
// 修改状态
this.baiduMap()
if (this.$route.query.operation === 'edit') {
this.isEdit = true
this.toGetList()
} else {
this.isEdit = false
}
this.togetAddressProvinces()
},
methods: {
querySearch(queryString, cb) {
var restaurants = this.restaurants
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
// 调用 callback 返回建议列表的数据
cb(results)
},
createFilter(queryString) {
return (restaurant) => {
return restaurant
}
},
handleSelect(item) {
this.map.clearOverlays() // 清除地图上所有覆盖物
this.shopaddress = item.address
this.ruleForm.longitude = item.point.lng
this.ruleForm.latitude = item.point.lat
this.ruleForm.address = item.address
const pp = item.point // 获取第一个智能搜索的结果
this.map.centerAndZoom(pp, 15)
this.map.addOverlay(new BMap.Marker(pp)) // 添加标注
},
baiduMap() {
// 百度地图API功能
// this.map = new BMap.Map('l-map')
var _this = this
var point = new BMap.Point(addLng, addLat)
_this.map.centerAndZoom(point, 12) // 初始化地图,设置城市和地图级别。
_this.map.addControl(new BMap.ScaleControl({ anchor: BMAPANCHORTOPLEFT }))
_this.map.addControl(new BMap.NavigationControl())
if (_this.$route.query.operation === 'edit') {
var marker = new BMap.Marker(point) // 创建标注
_this.map.addOverlay(marker)
} else {
var geolocation = new BMap.Geolocation()
// 根据IP定位当前经纬度
geolocation.getCurrentPosition(function(r) {
if (this.getStatus() === BMAPSTATUSSUCCESS) { // BMAP_STATUS_SUCCESS 检索成功。对应数值“0”。
var mk = new BMap.Marker(r.point)
_this.map.addOverlay(mk)
_this.map.panTo(r.point)
// alert('您的位置：'+r.point.lng+','+r.point.lat);
}
}, {
enableHighAccuracy: true
})
}
this.local = new BMap.LocalSearch(this.map, {
onSearchComplete: (res) => {
if (this.local.getStatus() === BMAPSTATUSSUCCESS) {
this.restaurants = []
for (let i = 0; i < res.getCurrentNumPois(); i++) {
this.restaurants.push(res.getPoi(i))
}
console.log('restaurants', this.restaurants) // 搜索触发的地址列表
}
}
})
// map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
}
},
components: {
}
}嗯，问题解决！
