The simplest way is to hide all regions every time a click event is triggered, then determine the current region based on this currently clicked and then display the current region

First, you can add a unified class to all buttons, such asbtn-test, and then add a custom attribute to each button, such asdata-name, and put this button on each one to represent which branch, and then give it to all Such buttons are uniformly added to monitor, and the value ofdata-nameis used to determine which one is clicked, and then all icons on the map are deleted first, and then only the clicked one is displayed:

$('.btn-test').click(function(){ \第一步先删除所属分局的图标 \然后显示点击的按钮对应的图标 switch(this.data('name')){ case "山东分局": \.显示山东分局对应的图标 break; \... } })

This is similar to the three-level linkage idea. Click any button to clear the map content first, and then transfer the corresponding content according to this

The click event passes in an ID. Each button has its own specific ID.
Hide all points before creating them.
And determine whether your ID point exists.

存在再将这个点的状态更改为显示 不存在 创建的新的点并把ID当属性写入新创建点