独角兽企业重金招聘Python工程师标准>>>
先看图
然后点确定，居然下拉框又被触发了，而且在添加页面各种输入框只要一输入文字就会触发地图下拉框展示，很恶心的一个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.valuevar 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 = ' + valuevalue = ''if (e.toitem.index > -1) {_value = e.toitem.valuevalue = _value.province + _value.city + _value.district + _value.street + _value.business}str += '<br />ToItem<br />index = ' + e.toitem.index + ' <br />value = ' + valueG('searchResultPanel').innerHTML = str})var myValueac.addEventListener('onconfirm', function(e) { // 鼠标点击下拉列表后的事件var _value = e.item.valuemyValue = _value.province + _value.city + _value.district + _value.street + _value.businessG('searchResultPanel').innerHTML = 'onconfirm<br />index = ' + e.item.index + '<br />myValue = ' + myValuesetPlace()})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.lngaddLat = 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)}
虽然能实现需求，但这个触发的弹框真的很无奈，后面经过同事提醒，结合类参考/cms/jsapi/reference/jsapi_reference.html#a7b0，
然后自己写了个搜索框，我是采用的vue+elementUI，具体代码如下：
html
<el-form-item label="详细地址"><div id="r-result"><el-autocompletewidth="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 = truethis.toGetList()} else {this.isEdit = false}this.togetAddressProvinces()},methods: {querySearch(queryString, cb) {var restaurants = this.restaurantsvar 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.addressthis.ruleForm.longitude = item.point.lngthis.ruleForm.latitude = item.point.latthis.ruleForm.address = item.addressconst 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 = thisvar 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: {}}
嗯，问题解决！
