---
sidebarDepth: 2
---

# map地图
map地图

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


## TsVueMapBmap-百度地图
<template>
  <div class="echarts-wrap-demo">
    <div class="map-wrap">
        <TsVueMapBmap
            class="wrap"
            :customConfig="mapDatas.mapConfig2.customConfig" />
    </div>
  </div>
</template>

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

<fold-box title="点击以展示/mapDatas.mapConfig2数据">
    {{mapDatas.mapConfig2}}
</fold-box>


## TsVueMapDistrict-行政地图
<template>
  <div class="echarts-wrap-demo">
    <div class="map-wrap">
        <TsVueMapDistrict
            class="wrap" />
    </div>
  </div>
</template>

```vue
<div class="map-wrap">
    <TsVueMapDistrict
        class="wrap" />
</div>
```
<click-to-copy :info="TsVueMapDistrictTag" />

## TsVueMapHeatmap-热力图
<template>
  <div class="echarts-wrap-demo">
    <div class="map-wrap">
        <TsVueMapHeatmap
            class="wrap"
            :data="mapDatas.mapConfig3.data" />
    </div>
  </div>
</template>

```vue
<div class="map-wrap">
    <TsVueMapHeatmap
        class="wrap"
        :data="mapDatas.mapConfig3.data" />
</div>
```
<click-to-copy :info="TsVueMapHeatmapTag" />
<fold-box title="点击以展示/mapDatas.mapConfig3.data数据">
    {{mapDatas.mapConfig3.data}}
</fold-box>

## TsVueMapScatter-散点图
<template>
  <div class="echarts-wrap-demo">
    <div class="map-wrap">
        <TsVueMapScatter
            class="wrap"
            :data="mapDatas.mapConfig4.data" />
    </div>
  </div>
</template>

```vue
<div class="map-wrap">
    <TsVueMapScatter
        class="wrap"
        :data="mapDatas.mapConfig4.data" />
</div>
```
<click-to-copy :info="TsVueMapScatterTag" />
<fold-box title="点击以展示/mapDatas.mapConfig4.data数据">
    {{mapDatas.mapConfig4.data}}
</fold-box>

## TsVueMapEffectScatter-涟漪效果散点图
<template>
  <div class="echarts-wrap-demo">
    <div class="map-wrap">
        <TsVueMapEffectScatter
            class="wrap"
            :data="mapDatas.mapConfig4.data" />
    </div>
  </div>
</template>

```vue
<div class="map-wrap">
    <TsVueMapEffectScatter
        class="wrap"
        :data="mapDatas.mapConfig4.data" />
</div>
```
<click-to-copy :info="TsVueMapEffectScatterTag" />
<fold-box title="点击以展示/mapDatas.mapConfig4.data数据">
    {{mapDatas.mapConfig4.data}}
</fold-box>

## TsVueMapLines-飞线图
<template>
  <div class="echarts-wrap-demo">
    <div class="map-wrap">
        <TsVueMapLines
            class="wrap"
            :data="mapDatas.mapConfig1.data"
            :customConfig="mapDatas.mapConfig1.customConfig" />
    </div>
  </div>
</template>

```vue
<div class="map-wrap">
    <TsVueMapLines
        class="wrap"
        :data="mapDatas.mapConfig1.data"
        :customConfig="mapDatas.mapConfig1.customConfig" />
</div>
```
<click-to-copy :info="TsVueMapEffectScatterTag" />
<fold-box title="点击以展示/mapDatas.mapConfig1">
    {{mapDatas.mapConfig1}}
</fold-box>

## TsVueMapMapv-特殊配置(还未完善)
<template>
  <div class="echarts-wrap-demo">
    <div class="map-wrap">
        <TsVueMapMapv
            class="wrap" />
    </div>
  </div>
</template>

```vue
<div class="map-wrap">
    <TsVueMapLines
        class="wrap" />
</div>
```
<click-to-copy :info="TsVueMapMapvTag" />

<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" />`,
      TsVueMapDistrictTag: `<TsVueMapDistrict
                                    class="wrap" />`,
      TsVueMapHeatmapTag: `<TsVueMapHeatmap
                                   class="wrap"
                                   :data="mapDatas.mapConfig3.data" />`,
      TsVueMapScatterTag: `<TsVueMapScatter
                                   class="wrap"
                                   :data="mapDatas.mapConfig4.data" />`,
      TsVueMapEffectScatterTag: `<TsVueMapEffectScatter
                                    class="wrap"
                                    :data="mapDatas.mapConfig4.data" />`,
      TsVueMapEffectScatterTag: `<TsVueMapLines
                                     class="wrap"
                                     :data="mapDatas.mapConfig1.data"
                                     :customConfig="mapDatas.mapConfig1.customConfig" />`,
      TsVueMapMapvTag: `<TsVueMapLines
                                class="wrap" />`,
    }
  },
  methods: {
  },
  async created () {
    this.show = true
  },
}
</script>
<style lang="scss" scoped>
    /*map样式*/
    .map-wrap {
       width: 100%;
       height: 400px;
      .chart {
        width: 100%;
        height: 100%;
      }
    }
</style>
