基于vue2.0手机端如何写获取百度地图

在webpack.base.conf.js的module.exports的方法中粘贴下面externals对象，注意：它是跟entry平级

  externals: {
    "BMap": "BMap"
  },

以下是完整的vue组件，根据经纬度定位，可搜索地点，地图可放大缩小，可选择地图模式

  <div class="myMap">
    <div class="header" id="r-result">
      <span @click="back() ">返回</span>
      <form target="frameFile" id="search_from"> 
        <input id="suggestId" v-model="mmaddress" type="search" placeholder="搜索地点" />
        <iframe name='frameFile' style="display: none;"></iframe>
      </form>
      <span id="go"  @click="search($event)">搜索</span> 
    </div>
    <div class="map-wrap" style="position:relative" id="allmap"></div>
    <div class="info bottom_info" id="fujin">
      <div v-for='(v,k) in addressList' :key='k' class="item" @click="seachAddress(v.point.lng,v.point.lat)">
        <p>{{v.title}}</p>
        <p>{{v.address}}</p>
      </div>
    </div>
  </div>
</template>
<script>
  import BMap from 'BMap';
  import base from '../../assets/js/base'

  export default {
    name: 'myMap',
    data() {
      return {
        lng: 120.21937542,
        lat: 12.25924446,
        map: '',
        mmaddress:'',
        addressList:[]
      }
    },
    mounted() {
      this.ready();
      let _this = this;
      //用于实现点击手机软键盘的搜索功能
      document.getElementById('search_from').onsubmit = function(e){
        _this.search(e);
        document.activeElement.blur();//软键盘收起
      }
    },
    methods: {
     /* back() {
        this.$emit("map_type", 0);
      },*/
      ready: function () {
        //base.msg.loader();这个是加载前的一个loading，我自己写的一个组件，不用管它
        let _this = this;
        let point2;

        //获取经纬度
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            _this.lng = r.point.lng;
            _this.lat = r.point.lat;
            base.msg.hide();
            point2 = new BMap.Point(r.point.lng, r.point.lat);
            _this.getLocalName(point2);
          }
          else {
            alert('failed' + this.getStatus());
          }
        }, {enableHighAccuracy: true});


        //加载地图到allmap和添加地图插件
        var map = new BMap.Map('allmap');
        this.map = map;
        var point = new BMap.Point(_this.lng, _this.lat);

        map.centerAndZoom(point, 17); //这个数字是放大缩小地图用的
        map.addControl(new BMap.MapTypeControl());
        let ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);

        map.enableScrollWheelZoom(true);
        map.enableDoubleClickZoom(true);
        let marker = new BMap.Marker(point);
        map.addOverlay(marker);
      },

      getLocalName: function (point2) {
        let gc = new BMap.Geocoder();
        let that = this
        gc.getLocation(point2, function (rs) {
          let addComp = rs.addressComponents;
          that.map.enableScrollWheelZoom();
          that.map.centerAndZoom(point2, 16);
          that.displayPOI(point2);
        });
      },
      displayPOI: function (mPoint) {
        let mOption = {
          poiRadius: 500,           //半径为1000米内的POI,默认100米
          numPois: 12                //列举出50个POI,默认10个
        }
        let _this = this;
        let myGeo = new BMap.Geocoder();        //创建地址解析实例
        let circle = new BMap.Circle(mPoint, 500);
        this.map.addOverlay(circle);        //添加一个圆形覆盖物
        circle.hide();
        myGeo.getLocation(mPoint,
          function mCallback(rs) {
            sessionStorage.setItem('street', rs.addressComponents.street);
            _this.addressList = rs.surroundingPois;
            //console.log(_this.addressList)//获取全部POI（该点半径为100米内有6个POI点）
           }
           mOption
        );
      },
 search: function (event) {
        var myValue;
        var that = this;
        console.log(event.which);
        if(this.mmaddress==''){return;}
        that.addressList = [];
          document.activeElement.blur();
          base.msg.loader();
          var city = this.mmaddress;
          var options = {
            onSearchComplete: function (results) {
              // 判断状态是否正确
              if (local.getStatus() == BMAP_STATUS_SUCCESS) {
                console.log(results.getPoi(0)); 
                for (var i = 0; i < results.getCurrentNumPois(); i++) {
                  that.addressList.push(results.getPoi(i));
                }
                myValue = results.getPoi(0).address + results.getPoi(0).title;
                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                that.map.centerAndZoom(pp, 16);
                //setPlace();
                base.msg.hide();
              }
            }
          };
          var local = new BMap.LocalSearch(that.map, options);
          local.search(city);
      },
      seachAddress(lng,lat){
        let point2 = new BMap.Point(lng,lat);
        this.getLocalName(point2);
      }
   },
}
</script>
<style lang="less">
  @rem:35rem;
 .myMap {
    width: 100%;
    height: 31.5;
    .header {
      width: 100%;
      height: 2.5rem;
      display: inline-flex;
      align-items: center;
      span { display: inline-block;
        width:100/@rem;
        color: #44C9AA;
        height: 2rem;
        line-height: 2rem;
        font-size: 25/@rem;
        text-align: center;
      }
      #suggestId {
        width: 14.5rem;
        height: 2rem;
        line-height: 0.88rem;
        border-radius: .2rem;
        padding-left: 1.06666667rem;
        background: url("../../assets/images/send_07.png") #ffffff no-repeat 0.26666667rem 50%;
        background-size: 1rem 1rem;
        text-indent: .6rem;
      }
      #go{
        font-size: 25/@rem }
    }
    #allmap {
      width: 100%;
      height: 17rem;
    }
    .info {
      height: 12rem;
      position: relative;
      bottom: 0;
      left: 0;
      width: 100%;
      overflow: scroll;
      box-sizing: border-box;
      .item { padding: 0.4rem 0.4rem;
        background: #f9f9f9;
        line-height: 0.6rem;
        border-bottom: 1px solid #E6E6E6;
        &:last-child { border-bottom: none;
        }
        p {
          display: block;
          margin-bottom: .5rem;
          margin-left: .2rem;
          &:last-child { color: #999;
          }
        }
      }
    }
  }
</style>