Vue调用百度地图

Vue调用百度地图(百度地图API获取Key)

   v-cli 脚手架

1.在index.html文件中引入

             <script src="http://api.map.baidu.com/api?v=2.0&ak=2OjBdPwgnDYFK84dgzXifbp0Q3SaLiNv"></script>

2.bulid - webpack.base.conf.js - 加入 externals: {
                                                                                  'BMap': 'BMap'
                                                                           },

3.import引入如图

4.page文件夹新增测试.vue文件

  5.使用import引入如下：

 ==========================\\\\\\博主文件已上传\\\\\\==========================

<template>
  <div>
    <!--container-->
    <div class="m-t-10">
      <a class="mint-cell mint-field">
        <div class="mint-cell-wrapper">
          <div class="mint-cell-title">
            <span class="mint-cell-text">输入地址</span>
          </div>
          <div class="mint-cell-value">
            <input v-model="address_detail" type="text" id="suggestId"  name="address_detail" class="mint-field-core text-right">
          </div>
        </div>
      </a>
    </div>
    <div id="allmap" style="width: 100%;height:600px;border: 1px solid gray;overflow:hidden;"></div>
    <!--container end-->
  </div>
</template>

<script>
import comHeader from 'components/comHeader'
import BMap from 'BMap'

export default {
  components: {
    comHeader
  },
  data: () => ({
    headerData: {
      title: '办公地址',
      toLink: ''
    },
    address_detail: null, // 详细地址
    userlocation: {lng: '', lat: ''}
  }),
  created () {
    // 组件创建完后获取数据，这里和1.0不一样，改成了这个样子
    this.loadMap()
    // this.ready() // 如果在此处直接调用this.ready()方法，将无法加载地图
  },
  mounted () {
    this.ready()
  },
  methods: {
    loadMap: function () {
      // setTimeout(this.ready, 0)
    },
    ready: function () {
      var th = this
      var map = new BMap.Map('allmap')
      var point = new BMap.Point(114.0552, 22.55) // 创建点坐标
      map.centerAndZoom(point, 12)
      map.enableScrollWheelZoom()    // 启用滚轮放大缩小，默认禁用
      map.enableContinuousZoom()    // 启用地图惯性拖拽，默认禁用
      map.addControl(new BMap.NavigationControl())  // 添加默认缩放平移控件
      map.addControl(new BMap.OverviewMapControl()) // 添加默认缩略地图控件
      map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: 'BMAP_ANCHOR_BOTTOM_RIGHT' }))   // 右下角，打开
      // 建立一个自动完成的对象
      var ac = new BMap.Autocomplete({'input': 'suggestId', 'location': map})
      var myValue
      ac.addEventListener('onconfirm', function (e) {    // 鼠标点击下拉列表后的事件
        var _value = e.item.value
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business
        this.address_detail = myValue
        alert(this.address_detail)
        setPlace()
      })

      function setPlace () {
        map.clearOverlays()   // 清除地图上所有覆盖物
        function myFun () {
          th.userlocation = local.getResults().getPoi(0).point    // 获取第一个智能搜索的结果
          map.centerAndZoom(th.userlocation, 19)
          map.addOverlay(new BMap.Marker(th.userlocation))    // 添加标注
          alert(JSON.stringify(th.userlocation))
        }
        var local = new BMap.LocalSearch(map, { // 智能搜索
          onSearchComplete: myFun
        })
        local.search(myValue)
      }
      /* var map = new BMap.Map('allmap')
      map.enableScrollWheelZoom(true)
      console.log(map)
      var localSearch = new BMap.LocalSearch(map)
      // localSearch.enableAutoViewport() // 允许自动调节窗体大小
      map.clearOverlays() // 清空原来的标注
      localSearch.setSearchCompleteCallback(function (searchResult) {
        var poi = searchResult.getPoi(0)
        map.centerAndZoom(poi.point, 20)
        var point = new BMap.Point(poi.point.lng, poi.point.lat)
        var marker = new BMap.Marker(point) // 创建标注，为要查询的地方对应的经纬度
        map.addOverlay(marker)
      })
      localSearch.search('广东省深圳市南山区深圳软件园二期') */
    }
  }
}
</script>

<style>
  /* 去掉地图左下角的百度LOGO */
  .anchorBL {
    display:none
  }
</style>