谷歌地圖自定義標記視網膜分辨率

我正在開發一個HTML5的iPhone應用程序，並使用Phonegap進行構建。在應用程序中有一個谷歌地圖自定義標記，標記圖標的創建方法如下：相比於代碼中定義的大小谷歌地圖自定義標記視網膜分辨率

var image = new google.maps.MarkerImage("hat.png", null, null, null, new google.maps.Size(20,30)); 
var shadow = new google.maps.MarkerImage("shadow.png", null, null, null, new google.maps.Size(20,30)); 

var marker = new google.maps.Marker({ 
       map: map, 
       position: latlng, 
       index: markers.length, 
       icon: image,      
       shadow: shadow, 
       animation: google.maps.Animation.DROP, 
       html: htmlContent             
      });

圖標的實際大小是兩倍大小。這樣做是爲了確保圖標以高分辨率顯示在Retina顯示屏上。上面的代碼一直工作到現在，但現在發生的是以下內容。

當圖標下拉時，使用google.maps.Animation.DROP，圖標在高分辨率的下方顯示，但當地圖上的圖標「着陸」時，圖標切換爲低分辨率分辨率版本。

有沒有人遇到過相同的問題？

謝謝...

UPDATE 發現，如果我指定的谷歌地圖版本，如：

http://maps.googleapis.com/maps/api/js?v=3.0

所以我想這是最新的Goolge地圖API中的錯誤。

來源

2012-02-09 andkjaer

我剛剛發現這個問題。該錯誤似乎在其API的最新版本（v3.7）中，所以如果您通過URL參數？v = 3.6指定v3.6，它會正常工作。

更新：在版本3.8+（我認爲）你可以使用優化：假強制視網膜圖像，如果你使用一個。這是因爲優化：true會將所有精靈組織成一個主精靈。這意味着如果你只有很少的標記，你應該只做這個。另外，與Clusterer不太適合。

默認值現在已經過優化：true，如果設備在更高分辨率下創建主精靈之前甚至可以處理渲染許多高分辨率圖標，它將首先確定。例如，在視網膜Macbook Pro上加載大量標記的地圖，它們會出現高分辨率，但嘗試使用iPhone 4並不會。如果你強制使用優化的iPhone 4：false，並且有很多標記，它可能會造成很多結局。不知道4S，但我認爲它可能會使用更高分辨率的版本，因爲它具有更好的處理能力。

來源

2012-02-12 18:30:28

如果您遇到任何圖標切換到較低的分辨率，這是因爲地圖API使用畫布來渲染圖標（將它們分組和什麼？），以顯着提高用戶體驗。因此，這不是技術上的錯誤，但這確實會導致車的事情在某些瀏覽器發生（如老式IE）

但是有一個設置，您可以使用使用MarkerOptions關閉optimized: false

var marker = new google.maps.Marker({ 
      map: map, 
      position: latlng, 
      icon: image,      
      shadow: shadow, 
      optimized: false            
     });

來源

2012-02-22 04:21:14

我找到了我的解決方案，通過使用scaledSize而不是size來定義圖像的寬度和高度。

來源

2014-08-01 13:41:43

這看起來是正確的答案 – user1095118 2015-04-12 00:31:44

一些帶有標記的鏈接會很棒 – m1crdy 2015-05-27 15:23:15

它們在gMaps api網站[這裏]（https://developers.google.com/maps/documentation/javascript/markers#）轉換爲圖標），儘管他們沒有提及它的用途。：/ – LuudJacobs 2015-10-14 13:09:15

縮放大小屬性是正確的使用由谷歌作爲參考這裏：https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon

來源

2015-10-25 02:55:57

謝謝你的回答！添加更多細節會有幫助，因爲鏈接有時會失效。謝謝！ – 2015-10-25 03:25:46

只需使用一個對象與url，size，並且scaledSize屬性：

var icon = { 
    url: 'path/img/[email protected]', 
    size: new google.maps.Size(30, 40), 
    scaledSize: new google.maps.Size(30, 40) 
};

凡path/img/[email protected]是60px X 80px PNG。

來源

2017-07-27 13:30:17 Tim

谷歌地圖自定義標記視網膜分辨率

回答

相關問題