JavaScript Google Maps API 如何向addMarker传入自定义信息窗函数作为参数

原有代码失效的核心原因是：自定义的addInfoWindow函数内部直接访问了addMarker函数里的局部变量marker和map，作用域不匹配导致变量无法读取，才没有生效。

完整可运行代码 #

function initMap() {
  // 请自行补充map的基础配置，比如zoom、center等参数
  const map = new google.maps.Map(document.getElementById("map"), options);

  // 封装的addMarker方法
  function addMarker(props) {
    const marker = new google.maps.Marker ({
      position: props.coordinates,
      map: map,
      icon: "img/logo2.png",
    });

    // 场景1：传入信息窗内容，默认点击打开信息窗
    if (props.infoContent) {
      const infoWindow = new google.maps.InfoWindow({
        content: props.infoContent
      });
      marker.addListener("click", function(){
        infoWindow.open(map, marker);
      });
    }

    // 场景2：传入自定义点击函数，完全自定义标记的点击行为
    if (typeof props.onMarkerClick === 'function') {
      // 将当前marker和map实例传给回调函数，方便外部逻辑使用
      marker.addListener("click", () => props.onMarkerClick(marker, map));
    }
  }

  // 调用示例1：仅传坐标和信息窗内容
  addMarker({
    coordinates: {lat: 51.506, lng: -0.188},
    infoContent: "<h3>Tower 1</h3><p>第一个塔的描述信息</p>"
  });

  // 调用示例2：传入自定义点击逻辑，满足你要的自定义函数传参需求
  addMarker({
    coordinates: {lat: 51.497, lng: -0.129},
    onMarkerClick: function(marker, map) {
      // 这里可以写任意自定义逻辑
      const customInfo = new google.maps.InfoWindow({
        content: "<h3>自定义内容的塔</h3><p>这个标记的点击行为是完全自定义的</p>"
      });
      customInfo.open(map, marker);
    }
  });

  // 调用示例3：仅传坐标，无点击行为
  addMarker({coordinates:{lat: 51.515, lng: -0.098}});
}

独立封装addInfoWindow的写法 #

如果你需要把信息窗逻辑抽成独立公共方法，可以按下面的方式实现：

// 独立的信息窗方法，需要接收marker、map、内容三个必要参数
function addInfoWindow(marker, map, content) {
  const infoWindow = new google.maps.InfoWindow({
    content: content
  });
  marker.addListener("click", function(){
    infoWindow.open(map, marker);
  });
}

// 在addMarker内部调用即可
function addMarker(props) {
  const marker = new google.maps.Marker ({
    position: props.coordinates,
    map: map,
    icon: "img/logo2.png",
  });
  if (props.infoContent) {
    addInfoWindow(marker, map, props.infoContent);
  }
}

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