Javascript 谷歌地图API v3:移动设备上无法单击自定义标记

Javascript 谷歌地图API v3:移动设备上无法单击自定义标记,javascript,mobile,google-maps-api-3,google-maps-markers,Javascript,Mobile,Google Maps Api 3,Google Maps Markers,我们有一个网站,使用谷歌地图API v3在地图上显示一组标记。标记可以点击,并打开一个标准的谷歌地图信息弹出窗口 这在所有桌面浏览器上都非常有效。但由于某些原因,我无法让它在我测试过的任何移动设备(各种安卓和iOS设备)上工作。这些标记对点击没有反应 我已经把范围缩小到我们的定制标记。如果我使用new google.maps.MarkerImage()删除加载自定义标记图像的代码,那么它可以正常工作 var marker = new google.maps.Marker( var mar

我们有一个网站,使用谷歌地图API v3在地图上显示一组标记。标记可以点击,并打开一个标准的谷歌地图信息弹出窗口

这在所有桌面浏览器上都非常有效。但由于某些原因,我无法让它在我测试过的任何移动设备(各种安卓和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”属性),它可以正常工作

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() { ...... });
有什么想法吗?我在拔头发

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

找到了它

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

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

mapsapi中的这种不一致性意味着在编写代码时它没有经过我们最初的健全性检查,并且一旦发现问题就很难进行调试


<> p>因此,尽管我们提供了错误的数据类型,但我认为这样的不一致是API中的错误。

,API中没有提到这一点,因此,如果您试图让地图标记上的点击事件在移动设备上工作,请确保绑定到鼠标下沉事件而不是点击事件。

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

单击/鼠标向下或使用int缩放都没有为我解决这个问题

在使用chrome remote inspector进行调试后,我发现一个不透明度为0的div->frame位于可单击标记的上方(显式z索引: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>
-
+    

谢谢您的回答。我在问题中的复制+粘贴可能并不完美(我必须从更复杂的函数中提取相关代码),但parens在原始代码中很好——正如前面所述,当在桌面浏览器上运行时,代码工作正常。嗯,这个问题的问题听起来确实很相似。遗憾的是,给出的答案并不能解决我的问题(我们不在循环中,我对闭包很满意).但感谢您的尝试;这是迄今为止我看到的最相关的链接,即使它没有帮助。:-)您可能发现了一个功能,甚至是一个bug。您是否尝试过删除大小(甚至暂时作为测试)以查看未调整大小的标记是否正常工作?还是其他属性?自定义标记的处理方式不同。@AndrewLeach-我找到了。我将把它作为一个回答发表评论,因为太长了,但简短的回答是肯定的,这似乎是API在不同平台之间如何工作的一个怪癖。我可以确认,“signed_in”参数是罪魁祸首,很高兴你找到了它。我不确定这是否是一个bug:API的行为如文档所示(也就是说,给它期望的东西,它就会工作;意外的东西会产生未定义的结果)。如果你给它提供了一些意想不到的东西,那么它在桌面浏览器中确实可以工作,这是一个额外的好处,而不是一个bug。我怀疑如果有一个“修复”,它将确保在输入错误的情况下失败@AndrewLeach-我同意,但我仍然认为这是一个bug,因为(a)平台之间不一致,以及(b)如果失败,问题只会进一步表现出来,很难找到问题的根源。我对谷歌的建议是:(a)使其在平台之间保持一致;(b)如果失败,在创建标记的位置抛出一个错误,而不是让标记显示良好,但不可单击。我们花了很长时间试着调试我们的点击事件,直到发现问题出在创建标记之前。这让我免于了很多小时的沮丧。非常感谢!