vue+echarts实现中国地图省市区下钻以及添加标注

最新推荐文章于 2024-06-20 17:24:37 发布

#黑白键~

最新推荐文章于 2024-06-20 17:24:37 发布

阅读量2.9k

点赞数 1

文章标签： echarts 前端 javascript vue

本文链接：https://blog.csdn.net/zhang369000/article/details/126099675

版权

本文探讨了在Vue项目中使用Echarts实现中国地图省市区下钻及标注过程中遇到的问题，包括区域外标注冲突及市级标注在区级地图中不应显示。开发者分享了初步实现的效果，并寻求社区对于如何更新标注数据和处理组件间通信的建议。

摘要由CSDN通过智能技术生成

最近项目中有需要地图下钻和添加标注的需求，就先做了一个demo，在博客上查了一些资料，结合实际情况，发现除了一些状况，发篇文章，采集一下各位大佬的意见。

效果呈现

目前还没有问题，下面是省内地图，然后就出现了区域外的标注，原因大概是因为标注和下钻之间出现了冲突，如图：

不知道有没有大佬指导一下，下面还有区级的地图，一起贴上来：

这一块的问题，简单来说就是太原作为一个市级的标注，在区级中不应该显示标注。
地图代码

<template>
  <div>
    <div id="tool">
      <span @click="goBackChina">{
   {
    firstTitle }}</span>
      <span @click="goBackProvince">{
   {
    currentProvince.name }}</span>
      <span @click="goBackCity">{
   {
    currentCity.name }}</span>
    </div>
    <div id="chinaMap"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
const {
    province, city } = require("province-city-china/data");
const data1 = [//需要标注的地点的名称
  {
    name: "营口", value: 0 },
  {
    name: "江阴", value: 0 },
  {
    name: "太原", value: 0 },
  {
    name: "铜川", value: 0 },
  {
    name: "平度", value: 0 },
  {
    name: "章丘", value: 0 },
  {
    name: "临汾", value: 0 },
  {
    name: "石嘴山", value: 0 },
  {
    name: "沈阳", value: 0 },
  {
    name: "大庆", value: 0 },
];
const geoCoordMap = {
   //标注位置
  营口: [122.18, 40.65],
  江阴: [120.26, 31.91],
  太原: [112.53, 37.87],
  铜川: [109.11, 35.09],
  平度: [119.97