jsVectorMap标记无法点击：onMarkerClick事件未触发console.log求助

你遇到的onMarkerClick事件无法触发的核心原因是jsVectorMap 1.x版本的事件配置方式错误：在1.3.0版本中，标记点击事件的回调不能直接作为顶级配置项，需要嵌套在on配置对象中，且事件名要去掉on前缀，使用markerClick。

另外，原代码中在回调里直接引用myMap存在作用域隐患（当前场景虽能运行，但写法不够严谨），可以改用回调的第三个参数获取地图实例。

修改后的完整脚本代码：

@section('script')
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- jsVectorMap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.3.0/dist/js/jsvectormap.min.js"></script>
    <!-- World Mercator Projection Map Data -->
    <script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.3.0/dist/maps/world-merc.js"></script>
   
    <script>
        $(document).ready(function() {
            var myMap = new jsVectorMap({
                map: 'world_merc',
                selector: '#worldMap',
                markers: [{
                    coords: [48.8566, 2.3522],
                    name: 'Paris' // Marker in Paris
                }],
                markerStyle: {
                    initial: {
                        fill: '#F8E23B',
                        stroke: '#383f47'
                    }
                },
                // 修正事件配置方式
                on: {
                    markerClick: function(event, index, map) {
                        console.log('Marker ' + map.markers[index].name + ' clicked!');
                    }
                }
            });
        });
    </script>
@endsection

关键修改点 #

• 将原顶级配置项onMarkerClick移到on对象下，事件名改为markerClick
• 回调函数新增map参数，直接通过该参数获取地图实例，避免作用域问题

内容的提问来源于stack exchange，提问作者NewbieIsHere