javascript - 谷歌地图 API v3 : custom markers not clickable on mobile devices

Question

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

这适用于所有桌面浏览器。但出于某种原因，我无法让它在我测试过的任何移动设备(各种 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() { ...... });

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

有什么想法吗？我要拔头发了!

Answer 1

找到了!

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

这是一个非常微妙的问题:在桌面浏览器上， map API 似乎可以很好地处理这些以字符串形式提供的参数。它仅在移动浏览器上失败。

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

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