百度地图插件，可用于vue项目中。

百度地图

gitee项目地址：vue-bmap-gl | 基于 Vue 2.x 与百度地图GL的地图组件

安装

1	npm install vue-bmap-gl --save

main.js中的配置如下：

//vue-bmap-gl地图插件
import VueBMap from 'vue-bmap-gl';
import 'vue-bmap-gl/dist/style.css';
Vue.use(VueBMap);
VueBMap.initBMapApiLoader({
  //ak即app key，需要到百度地图开放平台申请
  ak: 'OoHQzDE7eScGnQBtf6onbEe8E0gSoScV',
  // 默认百度 sdk 版本为 1.0
  v: '1.0'
});

使用

将下面的示例代码放到一个vue文件中，以组件的形式使用即可。记得要设置宽高，因为这里设置的是100%。

<template>
  <div style="height: 100%;">
    <el-bmap :zoom="zoom" :center="center" style="height: 100%;">
      <el-bmap-marker vid="component-marker" :position="componentMarker.position"></el-bmap-marker>
      <el-bmap-label style="padding: 5px;" content="店铺地址" visible="true" :label-style="labelStyle" :position="labelPosition">
      </el-bmap-label>
    </el-bmap>
  </div>
</template>

<script>
  module.exports = {
    //店铺地址
    name: 'address_map',
    data() {
      return {
        zoom: 16, //放大等级
        center: [112.974144,23.307654], //中心的 经纬度。百度地图开放平台可获取高精度经纬度
        componentMarker: {
          position: [112.974144,23.307654] //小红点 经纬度
        },
        labelStyle: {//标签样式
          border: 'none',
          padding: '5px',
          color:'#ed2d2d',
          fontWeight:'bold',
          fontSize:'14px'
        },
        labelPosition:[112.974144,23.307654]//标签坐标
      };
    }
  };
</script>
<style></style>