谷歌地圖v3出現扭曲並加倍

此代碼完美適用於jsfiddle和任何其他JavaScript沙盒應用程序，但它在我的網站上無法正常工作。谷歌地圖v3出現扭曲並加倍

HTML：

<div id="mapcontainer" style="position:absolute;width:280px;height:160px;"></div>

JS：

<script src="http://maps.googleapis.com/maps/api/js?key=*********************************&sensor=false"></script> 
<script> 
    var myCenter = new google.maps.LatLng(33.436150, -117.623090); 

    function initialize() { 
     var mapProp = { 
      center: myCenter, 
      zoom: 9, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var map = new google.maps.Map(document.getElementById("mapcontainer"), mapProp); 

     var marker = new google.maps.Marker({ 
      position: myCenter, 
     }); 

     marker.setMap(map); 

     google.maps.event.trigger(map, 'resize') 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script>

它看起來像這樣：

enter image description here

公告前2/3如何扭曲和底部1/3是好的。我怎樣才能解決這個問題？

來源

2013-06-29 Thomas Lai

您是否有鏈接到您的網站，因爲它一定是由別的東西引起的？可能衝突的JS或CSS。 – tw16

我的網站是在oceankarma.co ...用戶名是oceankarma，密碼是Tycoonaks90 –

只是想知道...你編輯了什麼？ –

看來代碼中一定有其他問題。

您的谷歌地圖代碼看起來很完美，我做了一個fiddle來顯示區別。

從您的腳本看起來你是使用谷歌地圖的關鍵。我認爲在v3中這不是必需的。所以請嘗試替換它，如下所示。

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

來源

2013-06-29 19:21:43 Praveen

我從你的小提琴中複製並粘貼了代碼，它沒有任何區別。 –

@ DABAU5NERD哦，那應該有效。 – Praveen

@ DABAU5NERD我檢查了你的網站，它似乎很好？你能分享一下你的想法嗎？ – Praveen

由於解決此問題的註釋，我找到了類似的問題。

這是尋找在使用CSS調試器的地圖圖像中的一個，看的情況下，如果有人在頁面上不受任何其他樣式

來源

2015-10-08 19:41:45 Shane

我偶然發現了這個頁面後，我有同樣的問題我正在開發一個谷歌地圖。我想出的解決方案是在google map javascript之後添加下面的代碼。

$(window).resize(function(){ initMap(); });

「initMap（）;」部分是因爲它只是刷新地圖功能。如果你命名的功能有些不同，那就是你需要使用的東西。最終我意識到這是對問題的補救。但它的功能如同一種魅力，對於最終用戶來說幾乎不可察覺。當你調整窗口大小時，你所做的只是刷新地圖功能。

來源

2015-11-19 20:48:36

谷歌地圖v3出現扭曲並加倍

回答

相關問題