地图-百度地图的基本使用

在vue中使用百度地图

// 1. 安装
npm install -S vue-bmap-gl
npm install -S vue-mapvgl


// 2. 配置
// 引入vue-bmap-gl
import VueBMap from 'vue-bmap-gl';
import VueMapvgl from 'vue-mapvgl';
import 'vue-bmap-gl/dist/style.css';
Vue.use(VueBMap);
Vue.use(VueMapvgl);
// 初始化vue-bmap
VueBMap.initBMapApiLoader({
  // 百度的key
  ak: '7Qbjkfc8YBylegUL8j1yY1pV3iNtxKxW', // Your_key
  // 百度 sdk 版本，默认为 1.0
  v: '1.0'
});

方式二： Vue-baidu-map

// 1. 安装
npm i --save vue-baidu-map
// 2. 配置
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

// 3. 使用
<template>
  <baidu-map class="map">
  </baidu-map>
</template>

<style>
/* 地图容器必须设置宽和高属性 */
.map {
  width: 400px;
  height: 300px;
}
</style>