[Bug] Map series with scatter markers causes doubling and breaks hover/zoom in ECharts

### Version

latest version

### Link to Minimal Reproduction

I am unable to marker here, unable to fix it. It keeps on doubling the map

### Steps to Reproduce

import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';

const mapChart = ref(null);
let chart = null;
let currentZoom = 1;

const employeesByCountry = [
{ name: "Pakistan", value: 10 },
{ name: "United States of America", value: 20 },
{ name: "India", value: 15 },
{ name: "China", value: 8 },
{ name: "Brazil", value: 6 },
];

async function loadScript(src) {
return new Promise((resolve, reject) => {
if (document.querySelector(`script[src="${src}"]`)) return resolve();
const s = document.createElement("script");
s.src = src;
s.async = true;
s.onload = resolve;
s.onerror = () => reject(new Error(`Failed to load ${src}`));
document.head.appendChild(s);
});
}

async function initMap() {
await loadScript("/js/echarts.min.js");
await loadScript("/js/world.js");
await nextTick();

const ec = window.echarts;
chart = ec.init(mapChart.value);

const option = {
tooltip: {
trigger: "item",
formatter: (p) => {
const data = employeesByCountry.find(c => c.name === p.name);
return `${p.name}: ${data?.value ?? 0} employees`;
}
},
visualMap: {
min: 0,
max: 20,
text: ["High", "Low"],
calculable: true,
inRange: { color: ["#d3d3d3", "#0868ac"] },
},
series: [
{
name: "Employees",
type: "map",
map: "world",
roam: true, // allow drag + zoom
zoom: currentZoom,
data: employeesByCountry.map(c => ({ name: c.name, value: c.value })),
emphasis: { itemStyle: { areaColor: "#505050" } },
}
]
};

chart.setOption(option);
window.addEventListener('resize', () => chart.resize());
}

function zoomIn() {
currentZoom += 0.25;
chart.setOption({ series: [{ zoom: currentZoom }] });
}

function zoomOut() {
currentZoom = Math.max(0.5, currentZoom - 0.25);
chart.setOption({ series: [{ zoom: currentZoom }] });
}

onMounted(() => initMap());
onBeforeUnmount(() => chart?.dispose());

.zoom-buttons-wrapper {
position: absolute;
top: 10px;
right: 10px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
}

.zoom-buttons-wrapper button {
cursor: pointer;
background: white;
border: 1px solid #aaa;
border-radius: 4px;
width: 40px;
height: 36px;
font-size: 18px;
}

.zoom-buttons-wrapper button:hover {
background: #f0f0f0;
}

### Current Behavior

I am getting a doubling effect on map when i try to zoom in and out after adding map in above code
somehow i succeeded in adding zoom functionality in above code
however I am unable to add markers here without doubling behavior( i have scatter and mark handler both techniques none of them worked)

### Expected Behavior

markers to appear on the countries having employees and on zooming in and out every thing should work perfect

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

_No response_