vue调用百度地图API

安装

$ npm install vue-baidu-map --save

全局注册

在main.js 里面引入以下代码

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: '百度地图密钥AK'
})

 

使用方法

<doc-preview>
  <baidu-map class="map" style="display: flex; flex-direction: column" center="北京">
    <p style="padding: 0 10px;">以下是使用 `bm-view` 组件渲染的百度地图实例</p>
    <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>
  </baidu-map>
</doc-preview>

局部注册

1.按需加载需要的组件，百度地图提供的所有组件可以在依赖中找到，路径\node_modules\vue-baidu-map\components\index.js

import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch} from 'vue-baidu-map'

export default {
  components: {
    BaiduMap,
    BmView,
    BmControl,
    BmAutoComplete,
    BmLocalSearch
  }
}

<template>
 <baidu-map class="bm-view" v-bind="mapOptions">
 	  <bm-control :offset="{width: '10px', height: '10px'}">
	    <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 1}">
	   	    </bm-auto-complete>
	  </bm-control>
	  <bm-local-search :keyword="keyword" :auto-viewport="true" ></bm-local-search>
</baidu-map>

</template>

<script>
 import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch} from 'vue-baidu-map'
export default {
  components: {
    BaiduMap,
    BmView,
    BmControl,
    BmAutoComplete,
    BmLocalSearch
  },
  data() {
	   return {
	     mapOptions: {
	       ak: 'ak',
	       center: '广州',
	       scrollWheelZoom: true
	     },
	     keyword: ''
	   }
	},
	methods: {
	
	}
}
</script>

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