[Vue] 百度地图根据地名定位

1.在html页面中引入百度地图js文件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>

2.页面展示

 

3.demo展示

<div class="position-relative">
        <div id="grid_map" style="width: 100%;" :style="{ height: mapHeight + 'px' }"></div>
        <div class="dialog-map-search">
          请输入：<input type="text" id="address_search" size="20" placeholder="请输入位置" style="width:150px;" />
        </div>
      </div>

this.searchResult()

searchResult () {
      let ac = new BMap.Autocomplete(    // 建立一个自动完成的对象
          {"input" : "address_search"
            ,"location" : this.map
          })

      ac.addEventListener("onhighlight", e => {
        let _value = e.fromitem.value
        let value = ''
        if (e.fromitem.index > -1) {
          value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business
        }

        value = ''
        if (e.toitem.index > -1) {
          _value = e.toitem.value
          value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business
        }
        console.log('onhighlight', value)
      })

      // 鼠标点击下拉列表后的事件
      ac.addEventListener("onconfirm", e => {
        let _value = e.item.value
        let myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business
        console.log('onconfirm', myValue)
        this.setPlace(myValue)
      })
    },

    setPlace(myValue){
      this.map.clearOverlays()   //清除地图上所有覆盖物
      let _this = this
      function myFun(){
        let pp = local.getResults().getPoi(0).point    //获取第一个智能搜索的结果
        console.log('经度：'+pp.lng, '纬度：'+pp.lat)
        _this.licenseTask.longitude = pp.lng
        _this.licenseTask.latitude = pp.lat
        _this.licenseTask.address = local.getResults().keyword
        _this.map.centerAndZoom(pp, 18)
        _this.map.addOverlay(new BMap.Marker(pp))    //添加标注
      }
      let local = new BMap.LocalSearch(this.map, { //智能搜索
        onSearchComplete: myFun
      })
      local.search(myValue)
    },