调用百度地图API输入提示示例下拉列表一直被触发问题

简介:

先看图

然后点确定,居然下拉框又被触发了,而且在添加页面各种输入框只要一输入文字就会触发地图下拉框展示,很恶心的一个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: {
  }
}

嗯,问题解决!

相关文章
|
9天前
|
JSON API 数据格式
Amazon商品详情API,json数据格式示例参考
亚马逊商品详情API接口返回的JSON数据格式通常包含丰富的商品信息,以下是一个简化的JSON数据格式示例参考
|
15天前
|
安全 API UED
WebSocket API 中的 close 事件是如何触发的?
【10月更文挑战第26天】close事件的触发涵盖了从正常的连接关闭到各种异常情况导致的连接中断等多种场景。通过监听close事件,开发人员可以在连接关闭时进行相应的处理,如清理资源、更新界面状态或尝试重新连接等,以确保应用程序的稳定性和良好的用户体验。
|
18天前
|
JSON API 数据格式
店铺所有商品列表接口json数据格式示例(API接口)
当然,以下是一个示例的JSON数据格式,用于表示一个店铺所有商品列表的API接口响应
|
1月前
|
机器学习/深度学习 PyTorch 算法框架/工具
揭秘深度学习中的微调难题:如何运用弹性权重巩固(EWC)策略巧妙应对灾难性遗忘,附带实战代码详解助你轻松掌握技巧
【10月更文挑战第1天】深度学习中,模型微调虽能提升性能,但常导致“灾难性遗忘”,即模型在新任务上训练后遗忘旧知识。本文介绍弹性权重巩固(EWC)方法,通过在损失函数中加入正则项来惩罚对重要参数的更改,从而缓解此问题。提供了一个基于PyTorch的实现示例,展示如何在训练过程中引入EWC损失,适用于终身学习和在线学习等场景。
63 4
揭秘深度学习中的微调难题:如何运用弹性权重巩固(EWC)策略巧妙应对灾难性遗忘,附带实战代码详解助你轻松掌握技巧
|
4天前
|
JSON API 数据格式
携程API接口系列,酒店景点详情请求示例参考
携程API接口系列涵盖了酒店预订、机票预订、旅游度假产品预订、景点门票预订等多个领域,其中酒店和景点详情请求是较为常用的功能。以下提供酒店和景点详情请求的示例参考
|
1月前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索json数据格式示例(API接口)
拍立淘按图搜索API接口为电商平台和购物应用提供了强大的图像搜索功能,能够显著提升用户的购物体验和搜索效率。开发者可以根据自己的需求调用此接口,并处理返回的JSON格式数据来展示推荐商品
|
8天前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
|
2月前
|
JSON Go API
使用Go语言和Gin框架构建RESTful API:GET与POST请求示例
使用Go语言和Gin框架构建RESTful API:GET与POST请求示例
|
1月前
|
JSON API 数据格式
商品详情数据JSON格式示例参考(api接口)
JSON数据格式的商品详情数据通常包含商品的多个层级信息,以下是一个综合多个来源信息的JSON数据格式的商品详情数据示例参考:
|
1月前
|
存储 前端开发 API
Restful API 设计示例
Restful API 设计示例
31 0

热门文章

最新文章