谷歌地圖瓦片陣容問題

我目前正在一個網站上工作，我想要顯示一個相當小的谷歌地圖，大小爲200px x 200px，但由於某種原因，我得到了這個問題。谷歌地圖瓦片陣容問題

正如你可以在圖片看到，有上左側的灰線，地磚不匹配和標記心不是右側任意位置。

有人知道爲什麼會發生這種情況嗎？我讀了一下，但我能找到的只有人有灰線的問題，但沒有瓷磚錯位混合物。

我目前已經安裝了地圖div一個html文件，如：

<div id="map_30" style="height:200px; width:200px; float:left;"></div>

沒有任何人有任何線索，爲什麼發生這種情況？

謝謝！

編輯：我添加了一個的jsfiddle：http://jsfiddle.net/acs90m6k/

來源

2015-11-08 TheUnriashol

請張貼小提示所以我們可以看到問題 –

請提供一個[最小，完整，已測試和可讀的示例]（http://stackoverflow.com/help/mcve）來說明您的問題。 [您發佈的「代碼」到目前爲止不是]（http://jsfiddle.net/geocodezip/o85nx8x0/）（但它可能是一個CSS問題） – geocodezip

嘗試添加

<div id="map_30" style="height:200px; width:200px; 
      float:left; padding: 0px; margin: 0px;"></div>

我已經試過這一點，工作細（小200x200的地圖在頁面的左上角）

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Info windows</title> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map_30" style="height:200px; width:200px; float:left; padding: 0px; margin: 0px;"></div> 
    <script> 
     function initialize() { 

      //Map parametrs 
      var mapOptions_place = { 
       zoom: 6, 
       center: new google.maps.LatLng(-16.39, -71.83), 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 

       mapTypeControl: false, 
       mapTypeControlOptions: { 
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
        position: google.maps.ControlPosition.BOTTOM_CENTER 
       }, 
       panControl: false, 
       panControlOptions: { 
        position: google.maps.ControlPosition.TOP_RIGHT 
       }, 
       zoomControl: false, 
       zoomControlOptions: { 
        style: google.maps.ZoomControlStyle.LARGE, 
        position: google.maps.ControlPosition.TOP_RIGHT 
       }, 
       scaleControl: false, 
       scaleControlOptions: { 
        position: google.maps.ControlPosition.TOP_LEFT 
       }, 
       streetViewControl: false, 
       streetViewControlOptions: { 
        position: google.maps.ControlPosition.LEFT_TOP 
       }, 
       scrollwheel: false 
      } 

      //map 
      var map_place = new google.maps.Map(document.getElementById("map_30"), mapOptions_place); 

      var quake_3 = 'img/map-icons/quake-3.png'; 
      var quake_4 = 'img/map-icons/quake-4.png'; 
      var quake_5 = 'img/map-icons/quake-5.png'; 
      var quake_6 = 'img/map-icons/quake-6.png'; 
      var quake_7 = 'img/map-icons/quake-7.png'; 
      var quake_8 = 'img/map-icons/quake-8.png'; 

      //positions 
      var point_place = new google.maps.LatLng(-16.39, -71.83); 

      //markers 
      var marker_place = className = 'Test'; 
      var marker_place = new google.maps.Marker({ 
       position: point_place, 
       map: map_place, 
       category: quake_3, 
       title: "point_place" 
      }); 
     }; 

     //google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    <script async defer 
     src="https://maps.googleapis.com/maps/api/js?callback=initialize"></script> 
    </body> 
</html>

來源

2015-11-08 13:06:06 scaisEdge

這並沒有改變任何可悲的事情。這是一個Jsfiddle：http://jsfiddle.net/acs90m6k/ – TheUnriashol

然後，它必須是關於我的地圖容器的css的一些問題。感謝您爲我驗證。我會繼續嘗試。 – TheUnriashol

如果我的回答很有用，請評分 – scaisEdge

谷歌地圖瓦片陣容問題

回答

相關問題