Vue.js 中国地图省份展示代码示例

<template>
  <div>
    <div class='map-container'>
      <svg viewBox='0 0 1000 800'>
        <g class='provinces'>
          <path
            v-for='(province, index) in provinces'
            :key='index'
            :d='province.path'
            :class='province.class'
            @mouseover='onProvinceMouseOver(province)'
            @mouseout='onProvinceMouseOut(province)'
          />
        </g>
      </svg>
    </div>
<pre><code>&lt;div class='detail-container'&gt;
  &lt;h2&gt;{{ selectedProvince.name }}&lt;/h2&gt;
  &lt;p&gt;{{ selectedProvince.description }}&lt;/p&gt;
&lt;/div&gt;
</code></pre>
  </div>
</template>
<script>
 export default {
  data() {
    return {
      provinces: [
        {
          name: '北京市',
          path: 'M 272 58 L 272 250 L 470 250 L 470 58 L 272 58 Z',
          class: 'province',
          description: '北京市，简称“京”，是中华人民共和国的首都、直辖市、国家中心城市、超大城市，也是中国政治、文化、科技、教育和国际交往中心，是全国重要的交通枢纽和综合性国际航空枢纽。'
        },
        {
          name: '上海市',
          path: 'M 659 528 L 659 607 L 748 607 L 748 528 L 659 528 Z',
          class: 'province',
          description: '上海市，简称“沪”，是中华人民共和国直辖市之一，全国重要的经济、金融、贸易、航运、科技创新中心和综合交通枢纽，是国际经济、金融、贸易中心，也是国际航运中心和文化、科技创新中心，被誉为'东方明珠'。'
        }
        // 其他省份省略
      ],
      selectedProvince: {
        name: '',
        description: ''
      }
    }
  },
  methods: {
    onProvinceMouseOver(province) {
      province.class = 'province active';
      this.selectedProvince.name = province.name;
      this.selectedProvince.description = province.description;
    },
    onProvinceMouseOut(province) {
      province.class = 'province';
      this.selectedProvince.name = '';
      this.selectedProvince.description = '';
    }
  }
}
</script>
<style>
.province {
  fill: #ccc;
  stroke: #fff;
}

.province.active {
  fill: #f00;
}
.map-container {
  width: 1000px;
  height: 800px;
}

.detail-container {
  position: absolute;
  top: 50px;
  left: 1100px;
}
</style>