在Vue总使用百度地图

并非是一篇教程 只是记录相关资源 方便查看

申请百度地图开发者账号

开发者官网 demo实例

获取到ak之后

使用 script标签 引入 http://api.map.baidu.com/api?v=2.0&ak=ak编码

在Vue中使用

• 1. 在index.html 直接使用script标签引入
• 2. 这样在就能在 .vue 文件 直接使用 window.BMap 拿到百度地图的对象
• 3. 给一个固定大小的容器 然后参照 demo实例 就能写出优美的 地图应用了

<template>
    <div class="baidu-map">
        <div class="location">
            <div>店名: {{storeName}}</div>
            <div>预定位点: <input style="width: 300px" type="text" v-model="mylocation"> <button @click="goLocation" >定位</button> </div>
            <div>定位点信息：{{JSON.stringify(mysiteinfo)}} </div>
        </div>
        <div id="map"></div>
    </div>
</template>
<style >
.baidu-map{

}
#map{
width: 700px;
    height: 500px;
}
</style>
<script>
export default {
  name: 'baiduMap',
  data() {
    return {
      map: {},
      mysiteinfo: {},
      mylocation: this.location
    }
  },

  props: {
    location: {
      type: String,
      default: ''
    },
    storeName: {
      type: String,
      default: ''
    }
  },
  mounted() {

  },
  watch: {
    location(val) {
      this.mylocation = val
      if (val === '') {
        return
      }
      var myGeo = new window.BMap.Geocoder()
      const that = this
      myGeo.getPoint(val, function(point) {
        that.mysiteinfo = point
        console.log(point)
        if (point) {
          that.map.centerAndZoom(point, 20)
          that.map.addOverlay(new window.BMap.Marker(point))
        } else {
          alert('您选择地址没有解析到结果!')
        }
      })
    },
    mysiteinfo(val) {
      this.$emit('on-siteinfo-change', val) // ③组件内对myResult变更后向外部发送事件通知
    }
  },
  methods: {
    goLocation(e) {
      var myGeo = new window.BMap.Geocoder()
      const that = this
      myGeo.getPoint(that.mylocation, function(point) {
        that.mysiteinfo = point
        console.log(point)
        if (point) {
          that.map.centerAndZoom(point, 20)
          that.map.addOverlay(new window.BMap.Marker(point))
        } else {
          alert('您选择地址没有解析到结果!')
        }
      })
    }
  },
  created() {
    const that = this
    this.$nextTick().then(() => {
      that.map = new window.BMap.Map('map')
      // 创建地图实例
      var point = new window.BMap.Point(108.953567, 34.267509)
      // 创建点坐标
      that.map.centerAndZoom(point, 15)
      var geoc = new window.BMap.Geocoder()
      // 初始化地图，设置中心点坐标和地图级别
      that.map.enableScrollWheelZoom() // 启用滚轮放大缩小，默认禁用
      that.map.enableContinuousZoom() // 启用地图惯性拖拽，默认禁用
      that.map.addEventListener('click', function(e) {
        var pt = e.point
        that.mysiteinfo = pt
        geoc.getLocation(pt, function(res) {
          console.log(res)
          that.$set(that.mysiteinfo, 'address', res.address)
        })
      })
    })
  }
}
</script>