Google Maps API v3：自定義標記無法在移動設備上點擊

我們有一個網站使用Google Maps API v3在地圖上顯示一堆標記。標記是可點擊的，並打開標準的Google地圖信息彈出窗口。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() { ...... });

上述代碼適用於所有桌面瀏覽器，但在所有移動瀏覽器中均失敗。但是，如果我刪除自定義圖形（即'圖標'屬性），它工作正常。

任何想法？我正在拉我的頭髮！

來源

2012-04-10 SDC

有可能你已經找到了功能，甚至是錯誤。你是否嘗試過去除大小（即使暫時作爲測試）以查看未標記的標記是否正常工作？或其他屬性？自定義標記*的處理方式不同。 – 2012-04-10 17:18:07

@AndrewLeach - 我找到了。我會將它作爲答案張貼太長的評論，但簡短的回答是肯定的，這似乎是API在不同平臺之間工作的一個怪癖。 – SDC 2012-04-11 08:09:27

我可以確認'signed_in'參數是罪魁禍首 – 2016-12-09 05:41:02

找到了！

問題的根本原因是我們的代碼提供了標記大小和錨定屬性作爲字符串，而Maps API期望它們是整數。這些值從數據庫加載並從PHP程序提供給Javascript。因此，修正是在創建輸出爲JSON的數組時將PHP值轉換爲(int)。

這是一個非常微妙的問題：在桌面瀏覽器上，Maps API似乎能夠很好地應對這些以字符串形式提供的參數。只有在移動瀏覽器上纔會失敗。

Maps API中的這種不一致意味着它在編寫代碼時逃脫了我們最初的完整性檢查，並且一旦發現問題就很難進行調試。

因此，儘管根本原因是我們提供了錯誤的數據類型，但我認爲這種不一致會成爲API中的錯誤。

來源

2012-04-11 08:11:33 SDC

很高興你找到它。我不確定這是一個錯誤：API的行爲與文檔一樣（即給出它期望的結果，它會起作用;意想不到的結果會導致未定義的結果）。事實上，它*可以*在桌面瀏覽器中工作，如果你給它一些意想不到的東西是一種獎勵，而不是一個錯誤。我懷疑，如果有一個「修復」，它將是確保它在輸入錯誤的情況下失敗！ – 2012-04-11 09:59:54

@AndrewLeach - 我同意，但我仍然說它是一個錯誤，因爲（a）它在平臺之間不一致，（b）如果確實失敗了，問題只會顯示在更深的位置，使得很難找到源的問題。我對Google的建議是：（a）使平臺之間保持一致;（b）如果它失敗，請在創建標記點時拋出錯誤，而不是讓標記顯示正常，但不能點擊。我們花了很多年試圖調試我們的點擊事件，然後才發現它實際上是造成問題的標記創建。 – SDC 2012-04-12 10:52:32

這讓我從很多小時的挫折中解脫出來。非常感謝！ – GEMI 2012-05-25 12:09:48

因爲MarkerImage( paren不關閉任何地方，是什麼打破它。

來源

2012-04-10 14:51:25 mikevoermans

感謝您的回答。我的複製+粘貼到問題中可能並不完美（我必須從更復雜的函數中提取相關代碼），但代碼在原始代碼中很好 - 如前所述，代碼在桌面上運行時工作良好瀏覽器。 – SDC 2012-04-10 14:55:26

嗯...有關？ http://stackoverflow.com/a/9000241/961847 – mikevoermans 2012-04-10 15:04:58

嗯，這個問題的問題聽起來很相似。可悲的是，給出的答案並不是我的問題的解決方案（我們不在循環中，而且我對閉包很滿意）。但是，謝謝你的努力。這是迄今爲止我看到的最相關的鏈接，即使它沒有幫助。 :-) – SDC 2012-04-10 15:30:21

這在api中沒有提及，所以如果你想讓地圖標記上的點擊事件在移動設備上工作，只要確保你綁定到mousedown事件而不是click事件。

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

來源

2014-01-29 11:57:31

無論是點擊/ mousedown還是使用scale來解決我的bug。

使用chrome遠程檢測器進行調試後，發現一個div->不透明度爲0的幀位於可點擊標記的上方（顯式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>

來源

2016-02-23 21:11:26 AlexT

Google Maps API v3：自定義標記無法在移動設備上點擊

回答

相關問題