---
sidebarDepth: 1
---

# TsVueMapBmap-百度地图
百度地图

::: tip TIP
1.组件一定需要宽高</br>
2.需要先注册百度地图
:::


## 地图通用组件-TsVueMapCommon
<template>
  <div class="echarts-wrap-demo">
    <div class="map-wrap">
        <TsVueMapBmap
            class="chart"
            :customConfig="mapDatas.mapConfig2.customConfig" />
    </div>
  </div>
</template>

```vue
<div class="gauge-wrap">
    <TsVueMapBmap
        class="chart"
        :customConfig="mapDatas.mapConfig2.customConfig"/>
</div>
```
<click-to-copy :info="TsVueMapBmapTag" />

<script>
import {mapDatas} from '@/datas/index.js';
export default {
  data () {
    return {
      configTitle: '点击以展示/隐藏config数据',
      mapDatas: {
        ...mapDatas
      },
      show: false,
      TsVueMapBmapTag: `<TsVueMapBmap
                                class="wrap"
                                :customConfig="mapDatas.mapConfig2.customConfig"
                                class="chart" />`,
    }
  },
  methods: {
  },
  async created () {
    this.show = true
  },
}
</script>
<style lang="scss" scoped>
    /*gauge样式*/
    .gauge-wrap {
       width: 365px;
       height: 400px;
      .chart {
        width: 100%;
        height: 100%;
      }
    }
</style>
