iOS端Google Maps Places点击与地图点击事件冲突问题

我之前也碰到过一模一样的iOS端Google Places搜索冲突问题，大概率是iOS的触摸事件冒泡机制在搞鬼——当你点击Places下拉选项时，事件会穿透到下方的地图，触发了地图的click事件，后者直接把标记点设置成了屏幕点击的位置，完全覆盖了你在places_changed里设置的选中地点坐标。

下面是具体的修复步骤：

1. 先修正代码里的拼写错误 #

你代码里有个小笔误，bounds.extends应该是bounds.extend，虽然这个可能不是直接导致iOS问题的原因，但会影响地图视野调整，先改掉：

// 把这行
bounds.extends(place.geometry.location);
// 改成
bounds.extend(place.geometry.location);

2. 添加事件冲突的拦截机制 #

我们可以用一个标志位来标记是否正在处理地点选择，暂时禁用地图的click事件，避免冲突：

首先在组件类里定义一个私有变量：

private isHandlingPlaceSelection = false;

然后修改places_changed的事件监听逻辑，设置标志位并在处理完成后延迟恢复：

searchBox.addListener('places_changed', () => {
  this.isHandlingPlaceSelection = true; // 标记正在处理地点选择
  var places = searchBox.getPlaces();
  if(places.length == 0) {
    this.isHandlingPlaceSelection = false;
    return;
  }
  var bounds = new google.maps.LatLngBounds();
  places.forEach(place => {
    if(!place.geometry) {
      console.log("returned place contains no geometry");
      return;
    }
    this.setMarkerLocation(place);
    if(place.geometry.viewport) {
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  this.map.fitBounds(bounds);
  
  // 延迟300ms恢复标志位，确保地图的click事件不会抢在地点设置前触发
  setTimeout(() => {
    this.isHandlingPlaceSelection = false;
  }, 300);
});

接下来修改地图的click事件监听，当正在处理地点选择时直接跳过：

google.maps.event.addListener(this.map, 'click', (event: any)=> {
  // 如果正在处理地点选择，忽略本次地图点击
  if (this.isHandlingPlaceSelection) return;
  
  var clickedLocation = event.latLng;
  this.marker.setPosition(clickedLocation);
  this.getMarkerLocation();
});

3. 调整CSS确保Places下拉交互正常 #

iOS上有时候会出现触摸事件穿透到地图的情况，给Places下拉容器添加CSS确保它能正确接收触摸事件：

/* 确保Google Places下拉容器在最上层并能接收触摸事件 */
.pac-container {
  pointer-events: auto !important;
  z-index: 9999 !important;
}

.pac-item {
  cursor: pointer;
}

这样修改后，iOS端点击Places下拉选项时，地图的click事件会被暂时拦截，标记点就能正确定位到你选中的地点了，同时不影响正常的地图点击拖拽功能。

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