MapKit JS技术问题：如何让地图自适应浏览器窗口大小

问题原因 #

将地图容器的height设为100%后页面空白，是因为HTML和body元素默认没有设置占满视口的高度，子元素的百分比高度无法基于未定义高度的父元素计算。

解决步骤 #

1. 修改CSS确保父元素占满视口 #

更新样式，让html、body和地图容器都占满整个窗口，同时移除默认边距，避免出现滚动条或空隙：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
  width: 100%;
}

2. 添加窗口大小变化监听 #

MapKit JS不会自动响应窗口尺寸变化，需要手动调用map.resize()方法更新地图布局：

// 初始化地图后添加监听事件
window.addEventListener('resize', () => {
  map.resize();
});

修改后的完整代码 #

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    #map {
      height: 100%;
      width: 100%;
    }
    
    a:link,
    a:visited {
      color: #2aaef5;
      outline: none;
      text-decoration: none;
    }
    
    .landmark {
      width: 250px;
      padding: 7px 0 0 0;
      background: rgba(247, 247, 247, 0.75);
      border-radius: 5px;
      box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.29);
      font-family: Helvetica, Arial, sans-serif;
      -webkit-transform-origin: 0 10px;
      transform-origin: 0 10px;
    }
    
    .landmark h1 {
      margin-top: 0;
      padding: 5px 15px;
      background: #2aaef5;
      color: rgba(255, 255, 255, 0.9);
      font-size: 16px;
      font-weight: 300;
    }
    
    .landmark section {
      padding: 0 15px 5px;
      font-size: 14px;
    }
    
    .landmark section p {
      margin: 5px 0;
    }
    
    .landmark:after {
      content: "";
      position: absolute;
      top: 7px;
      left: -13px;
      width: 0;
      height: 0;
      margin-bottom: -13px;
      border-right: 13px solid #2aaef5;
      border-top: 13px solid rgba(0, 0, 0, 0);
      border-bottom: 13px solid rgba(0, 0, 0, 0);
    }
    
    @-webkit-keyframes scale-and-fadein {
      0% {
        -webkit-transform: scale(0.2);
        opacity: 0;
      }
      100% {
        -webkit-transform: scale(1);
        opacity: 1;
      }
    }
    
    @keyframes scale-and-fadein {
      0% {
        transform: scale(0.2);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    mapkit.init({
      authorizationCallback: function(done) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/services/jwt");
        xhr.addEventListener("load", function() {
          done(this.responseText);
        });
        xhr.send();
      }
    });

    var sanFranciscoLandmarks = [{
        coordinate: new mapkit.Coordinate(37.7951315, -122.402986),
        title: "泛美金字塔",
        phone: "+1-415-983-5420",
        url: "http://www.transamericapyramidcenter.com/"
      },
      {
        coordinate: new mapkit.Coordinate(37.7954201, -122.39352),
        title: "渡轮大厦",
        phone: "+1 (415) 983-8030",
        url: "http://www.ferrybuildingmarketplace.com"
      },
      {
        coordinate: new mapkit.Coordinate(37.8083396, -122.415727),
        title: "渔人码头",
        phone: "+1 (415) 673-3530",
        url: "http://visitfishermanswharf.com"
      },
      {
        coordinate: new mapkit.Coordinate(37.8023553, -122.405742),
        title: "科伊特塔",
        phone: "+1 (415) 249-0995",
        url: "http://sfrecpark.org/destination/telegraph-hill-pioneer-park/coit-tower/"
      },
      {
        coordinate: new mapkit.Coordinate(37.7552305, -122.452624),
        title: "苏特罗塔",
        phone: "+1 (415) 681-8850",
        url: "http://www.sutrotower.com"
      },
      {
        coordinate: new mapkit.Coordinate(37.779267, -122.419269),
        title: "旧金山市政大厅",
        phone: "+1 (415) 701-2311",
        url: "http://sfgsa.org/index.aspx?page=1085"
      },
      {
        coordinate: new mapkit.Coordinate(37.8184493, -122.478409),
        title: "金门大桥",
        phone: "+1 (415) 921-5858",
        url: "http://www.goldengatebridge.org"
      },
      {
        coordinate: new mapkit.Coordinate(37.7785538, -122.514035),
        title: "悬崖屋",
        phone: "+1 (415) 386-3330",
        url: "http://www.cliffhouse.com/"
      }
    ];

    var CALLOUT_OFFSET = new DOMPoint(-148, -78);
    var landmarkAnnotationCallout = {
      calloutElementForAnnotation: function(annotation) {
        return calloutForLandmarkAnnotation(annotation);
      },
      calloutAnchorOffsetForAnnotation: function(annotation, element) {
        return CALLOUT_OFFSET;
      },
      calloutAppearanceAnimationForAnnotation: function(annotation) {
        return ".4s cubic-bezier(0.4, 0, 0, 1.5) 0s 1 normal scale-and-fadein";
      }
    };

    var annotations = sanFranciscoLandmarks.map(function(landmark) {
      var annotation = new mapkit.MarkerAnnotation(landmark.coordinate, {
        callout: landmarkAnnotationCallout,
        color: "#c969e0"
      });
      annotation.landmark = landmark;
      return annotation;
    });

    var map = new mapkit.Map("map");
    map.showItems(annotations);

    // 监听窗口大小变化，更新地图尺寸
    window.addEventListener('resize', () => {
      map.resize();
    });

    function calloutForLandmarkAnnotation(annotation) {
      var div = document.createElement("div");
      div.className = "landmark";

      var title = div.appendChild(document.createElement("h1"));
      title.textContent = annotation.landmark.title;

      var section = div.appendChild(document.createElement("section"));

      var phone = section.appendChild(document.createElement("p"));
      phone.className = "phone";
      phone.textContent = annotation.landmark.phone;

      var link = section.appendChild(document.createElement("p"));
      link.className = "homepage";
      var a = link.appendChild(document.createElement("a"));
      a.href = annotation.landmark.url;
      a.textContent = "官网";

      return div;
    }
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者user982124