---
sidebarDepth: 2
---

# gl-map地图
gl-map地图

::: tip TIP
1.组件一定需要宽高</br>
2.本组件引入gl(1.1版本)，与之匹配的echarts是4.0,与5.0有兼容性问题</br>
请在@/utils/echarts-gl.js指向的目录新建一个echarts-gl.js文件
:::

<fold-box title="点击以展示/隐藏echarts-gl.js内容">
  <<< @/src/utils/echarts-gl.js
</fold-box>


## TsVueMapGlobe-地图
<template>
  <div class="echarts-wrap-demo">
    <div class="map-wrap">
        <TsVueGlMapGlobe
            class="wrap" />
    </div>
  </div>
</template>

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

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

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

<script>
import {mapDatas} from '@/datas/index.js';
export default {
  data () {
    return {
      configTitle: '点击以展示/隐藏config数据',
      mapDatas: {
        ...mapDatas
      },
      TsVueGlMapGlobeTag: `<TsVueGlMapGlobe
           class="wrap" />`,
      TsVueGlMapDistrictTag: `<TsVueGlMapDistrict
                                     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>
