Question

我目前正在开发一个网站，我想展示一张尺寸为200px x 200px的小型谷歌地图，但由于某种原因，我遇到了多个问题。

正如你在图片中看到的那样，左侧有一条灰线，瓷砖不匹配，标记的位置也不对。

有人知道为什么会这样吗？我读了一下，但我能找到的只是人们有灰线问题而不是瓷砖错位混合物。

我目前已经使用map div设置了一个html文件，如下所示：

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

有没有人知道为什么会这样？

谢谢！

编辑：我添加了一个jsfiddle：http://jsfiddle.net/acs90m6k/

Answer 1

尝试添加

  <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>

Google地图平铺阵容问题

1 个答案: