2

我们有一个网站使用 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() { ...... });

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

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

4

4 回答 4

8

找到了！

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

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

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

So despite the root cause being us providing the wrong data type, I would consider inconsistencies like this to be bugs in the API.

于 2012-04-11T08:11:33.247 回答
1

This is not mentioned in the api, so if you are trying to get the click events on map markers to work on mobile devices, just make sure you bind to the mousedown event and not the click event.

google.maps.event.addListener(marker, 'mousedown', function);
于 2014-01-29T11:57:31.980 回答
0

因为MarkerImage(paren 不会在任何地方关闭，这就是破坏它的原因。

于 2012-04-10T14:51:25.137 回答
0

Neither click/mousedown or scale with int solved the bug for me.

After debugging with chrome remote inspector, I found that a div->frame with opacity:0 was lying above (explicit z-index:2) the clickable markers.

I don't know what this frame is for.

You can remove this frame by removing "signed_in" from the script tag:

-    <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>
于 2016-02-23T21:11:26.547 回答