Google Maps API v3：自定义标记在移动设备上不可点击

我们有一个网站，它使用 Google Maps API v3 在地图上显示一堆标记。这些标记是可点击的，并打开一个标准的谷歌地图信息弹出窗口。

这在所有桌面浏览器上都非常有效。但由于某种原因，我无法让它在我测试过的任何移动设备（各种 Android 和 iOS 设备）上运行。标记根本不响应点击。

我已将范围缩小到我们的自定义标记。如果我删除使用加载自定义标记图像的代码new google.maps.MarkerImage()，然后就可以正常工作了。

var marker = new google.maps.Marker(
    var markerOptions = {
        icon : new google.maps.MarkerImage(
            mURL, new google.maps.Size(mWidth,mHeight),
            new google.maps.Point(0,0),new google.maps.Point(anchorX,anchorY)
        ),
        flat: true,
        position: point,
        visible: true,
        title: title,
        zIndex: zIndex,
        map: map,
    }
);

google.maps.event.addListener(marker,'click',function() { ...... });

上面的代码在所有桌面浏览器上都可以正常工作，但在所有移动浏览器上都会失败。但是，如果我删除自定义图形（即“图标”属性），它就可以正常工作。

有任何想法吗？我要拔头发了！

找到了！

问题的根本原因是我们的代码以字符串形式提供标记大小和锚点属性，而 Maps API 期望它们是整数。这些值从数据库加载并从 PHP 程序提供给 Javascript。因此，修复方法是将 PHP 值转换为(int)创建以 JSON 形式输出的数组时。

这是一个非常微妙的问题：在桌面浏览器上，Maps API 似乎可以很好地处理这些作为字符串提供的参数。只有在移动浏览器上才会失败。

Maps API 中的这种不一致意味着它在编写代码时逃脱了我们最初的健全性检查，并且一旦发现问题就很难进行调试。

因此，尽管根本原因是我们提供了错误的数据类型，但我认为这样的不一致是 API 中的错误。