模糊搜索+地址解析调整地图显示

模糊搜索

百度地图模糊搜索

具体实现：

  <div class="form-item">
    <input type="text" id="inp" class="form-control" placeholder="搜索地点">
  </div>

// 写在methods里面，在mounted里面调用
search: function (){
  let map;
  let ac = new BMap.Autocomplete({
    "input" : "inp",
    "location" : map
  });
}

地址解析

地址解析

具体实现：

<button @click="ready">我的位置</button>
<input type="text" id="locate" class="form-control" style="height:30px;font-size:12px;border-top-left-radius:3px;border-bottom-left-radius:3px;" placeholder="输入地点"/>
<div id="allmap"></div>

在js里引入import BMap from 'BMap';
引入外部图片import imgIcon from '../assets/img/icon/map_icon.png';

    ready(){
      let that=this;
      let geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          // 创建地图
          let map = new BMap.Map("allmap");
          let point = new BMap.Point(r.point);
          map.centerAndZoom(point,15);
          map.enableScrollWheelZoom(true);//开启滚动

          // 地图覆盖物
          var mk = new BMap.Marker(r.point);
          let icon = new BMap.Icon(imgIcon,new BMap.Size(20,22));
          map.addOverlay(mk);
          map.panTo(r.point);

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

          let myValue;
          //鼠标点击下拉列表事件
          ac.addEventListener("onconfirm", function(e) {
            var _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;

            // 地址解析
            var myGeo = new BMap.Geocoder();
            myGeo.getPoint(myValue, function(point){
              if (point) {
                // 调整题图视野
                map.centerAndZoom(point, 15);
                map.addOverlay(new BMap.Marker(point));
              }
            }, "");
          });
        }else {alert('failed'+this.getStatus());}
      });
    }

button{
    width: 100px;
    height: 30px;
    border: none;
    font-size: 14px;
    font-weight: bold;
    border-radius: 10px;
    background: #769164;
    color: #eee;
    margin: 0 10px;
  }
  button:hover{
    color: #769164;
    background: #eee;
  }
  #allmap{
    width: 800px;
    height: 520px;
    margin: 10px;
  }