未嵌入Google Maps

Question

我正在尝试使用Vue.js设置动态地图

我正在将this code移植到vue。

我已经很简单地将其复制为函数，如下所示：

        generateHeatmap(){
        const map = new google.maps.Map(document.getElementById('map'), {
            zoom: 13,
            center: {lat: 37.775, lng: -122.434},
            mapTypeId: 'satellite'
          });

          const heatmap = new google.maps.visualization.HeatmapLayer({
            data: this.getPoints(),
            map: map
          });
      },

问题是当我生成热图时，地图没有显示。我可以看到html代码在控制台中发生了变化，但是html没有呈现任何内容。我想念什么？

这是现场直播的Jsfiddle： https://jsfiddle.net/eywraw8t/430049/

Answer 1

在CSS中，您仅指定#map为width: 100%，但实际上需要指定宽度和高度。这样的事情会起作用：

#map {
  height: 500px;
  width: 500px;
}

编辑：

根据注释，您可以使用100％的宽度和高度，请参见this question for more info。