Question

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

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

上述代码适用于所有桌面浏览器，但在所有移动浏览器中都失败。但是，如果我删除自定义图形（即'icon'属性），它可以正常工作。

有什么想法吗？我把头发拉出来了！

Answer 1

发现它！

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

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

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

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

Answer 2

api中没有提到这一点，因此如果您尝试让地图标记上的点击事件在移动设备上运行，只需确保绑定到mousedown事件而不是点击事件。

google.maps.event.addListener(marker, 'mousedown', function);

Answer 3

因为MarkerImage( paren没有在任何地方关闭，是什么打破了它。

Answer 4

无论是click / mousedown还是scale with int都解决了我的错误。

使用chrome远程检查器调试后，我发现不透明度为0的div-＆gt;框架位于可显示的标记上方（显式z-index：2）。

我不知道这个框架的用途。

您可以通过从脚本标记中删除“signed_in”来删除此框架：

-    <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=googlemapsloaded"></script>
+    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=googlemapsloaded"></script>

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

4 个答案: