Google Maps JS API：调用map.dispatchEvent报错，如何触发地图点击事件？

问题分析 #

你遇到的map.dispatchEvent is not a function错误，本质是Google Maps的Map实例不是原生DOM元素，它不支持浏览器原生的dispatchEvent方法。Google Maps有自己独立的事件系统，不能直接用DOM事件的方式触发地图的click事件。

你的核心需求是：点击已有标记时，复用地图click监听器里的逻辑（在相同坐标添加新点到折线、创建新标记等），最直接且优雅的方案是把地图点击的核心逻辑抽成独立函数，而非强行触发事件。

解决方案 #

1. 提取地图click监听器内的核心逻辑为单独函数handleMapClick，接收latLng作为参数；
2. 地图的click监听器调用这个函数，传入mapsMouseEvent.latLng；
3. 标记的click监听器也调用这个函数，传入标记的position。

修改后的代码 #

// Draw lines for Zones of sign
drawPolyLineOnMap(zoneType) {
   var linePoint = [];
   this.$refs.mapRef.$mapPromise.then(map => {
      var markerIcon = "";
      var polyColor = "";

      switch (zoneType) {
         case 1:
            markerIcon = "http://maps.google.com/mapfiles/ms/icons/orange.png";
            polyColor = "#ff9900";
            break;
         case 2:
            markerIcon = "http://maps.google.com/mapfiles/ms/icons/pink.png";
             polyColor = "#e661ac";
             break;
         case 3:
             markerIcon = "http://maps.google.com/mapfiles/ms/icons/purple.png";
             polyColor = "#8e67fd";
             break;
         }

         var poly = new google.maps.Polyline({
            strokeColor: polyColor,
            strokeOpacity: 1.0,
            strokeWeight: 3
         });

         poly.setMap(map);
         var clickCounter = 0;

         // 提取核心逻辑为独立函数
         const handleMapClick = (latLng) => {
            clickCounter++;

            const path = poly.getPath();
            path.push(latLng);

            // Add a new marker at the new plotted point on the polyline.
            var marker = new google.maps.Marker({
               position: latLng,
               title: "#" + path.getLength(),
               map: map,
               icon: markerIcon,
               clickable: true,
            });

            marker.addListener("click", () => {
               this.test(marker.position);
               // 调用核心逻辑函数，传入标记位置
               handleMapClick(marker.position);
            });

            switch (zoneType) {
               case 1:                     
                  this.$refs.insertSignRef.detectionZoneMarkers.push(marker); 
                  this.$refs.insertSignRef.detectionZonePolyLine = poly;
                  this.detectionZoneToggle = false;
                  break;
               case 2:                          
                  this.$refs.insertSignRef.awarenessZoneMarkers.push(marker); 
                  this.$refs.insertSignRef.awarenessZonePolyLine = poly; 
                  this.awarenessZoneToggle = false;
                  break;
               case 3:
                  this.$refs.insertSignRef.relevanceZoneMarkers.push(marker); 
                  this.$refs.insertSignRef.relevanceZonePolyLine = poly; 
                  this.relevanceZoneToggle = false;
                  break;
               }

               linePoint.push(latLng.toJSON());

               if (clickCounter == 1) {
                  this.disableToolbox = true;
               }

               if (clickCounter == 2) {
                  this.enableConfirmToolbox = true;
               }

               this.stayToastMessage = "Click on map to insert the " + clickCounter + "º point for the Area";

               if (clickCounter >= 30) {
                  this.disableToolbox = false;
                  this.enableConfirmToolbox = false;
                  this.showStayToast = false;
                  this.stayToasts = 0;
                  this.addZoneListener.remove();
               }
         };

         // 地图点击监听器调用核心函数
         this.addZoneListener = map.addListener('click', mapsMouseEvent => {
            handleMapClick(mapsMouseEvent.latLng);
         });

         return linePoint;
     });
},

补充说明 #

如果一定要用Google Maps的事件触发方式，可使用google.maps.event.trigger方法（不推荐，因为耦合性更高），写法如下：

marker.addListener("click", () => {
   this.test(marker.position);
   // 用Google Maps的事件触发方法
   google.maps.event.trigger(map, 'click', { latLng: marker.position });
});

但这种方式需要确保你的地图click监听器能正确处理模拟的事件对象，相比之下，提取独立函数的方式更清晰、易维护。

内容的提问来源于stack exchange，提问作者Fábio Baptista