Vuejs百度地图_v0.0.1

版本号	作者	qq	版本号	备注
v0.0.1	飞豺	8416837

代码

安装依赖

cnpm install vue-baidu-map --save

安装完毕：

核实，查看package.json：

Hello World

<template>
  <baidu-map class="bm-view" ak="your ak">
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  }
}
</script>

<style>
  .bm-view {
    width: 100%;
    height: 300px;
  }
</style>

上面的写法还不行，数据没有渲染，优化一下：

<template>
  <baidu-map  :center="center" :zoom="zoom" @ready="handler" class="bm-view" ak="your ak">
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  },
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3
    }
  },
  mounted() {
    this.lng = 116.404
    this.lat = 39.915
    this.zoom = 15
  },
  methods: {
    handler({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>

<style>
  .bm-view {
    width: 100%;
    height: 100%;
  }
</style>

图刷出来了，默认定位到北京：

• 更新参数

	  this.center.lng = 106.403765 // 经度
      // this.center.lng = 116.404
      this.center.lat = 39.914850 // 纬度
      // this.center.lat = 39.915
      this.zoom = 5 // 缩放级别

效果：

更新样式

• 注入属性

:theme="styleJson"
// ps：theme不推荐使用，将在下个版本移除

• 样式文件

myStyleJson: [{
        'featureType': 'background',
        'elementType': 'geometry',
        'stylers': {
          'color': '#152041ff'
        }
      },
      {
        'featureType': 'water',
        'elementType': 'geometry',
        'stylers': {
          'color': '#223465ff'
        }
      },
      {
        'featureType': 'road',
        'elementType': 'geometry.fill',
        'stylers': {
          'color': '#6a7cadff'
        }
      },
      {
        'featureType': 'districtlabel',
        'elementType': 'labels.text.fill',
        'stylers': {
          'color': '#ffffffff'
        }
      },
      {
        'featureType': 'districtlabel',
        'elementType': 'labels.text.stroke',
        'stylers': {
          'color': '#121620ff'
        }
      },
      {
        'featureType': 'districtlabel',
        'elementType': 'labels.icon',
        'stylers': {
          'visibility': 'off'
        }
      },
      {
        'featureType': 'boundary',
        'elementType': 'geometry',
        'stylers': {
          'color': '#adebffff'
        }
      },
      {
        'featureType': 'highway',
        'elementType': 'all',
        'stylers': {
          'color': '#869dd8ff'
        }
      }
      ]

• 效果