谷歌地图瓦片阵容问题

我目前正在一个网站上工作，我想要显示一个相当小的谷歌地图，大小为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

谷歌地图瓦片阵容问题

回答

相关问题