谷歌地图 javascript 不显示答案

【问题标题】：Google Maps javascript doesn't show谷歌地图 javascript 不显示
【发布时间】：2017-09-09 11:43:13
【问题描述】：

我正在使用 NodeJS 和 AngularJS 开发一个 Web 应用程序。现在，我正在尝试使用 heatmapjs 和 gmap plugin 放置热图。

我已经用我的 API KEY 将脚本包含在 html 中（我也在使用 Chartjs）：

<script src="/node_modules/chart.js/dist/Chart.js"></script>
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=MY_APIKEY">
    </script>
    <script src="/node_modules/heatmap.js/build/heatmap.js"></script>
    <script src="gmaps-heatmap.js"></script>

我已将the example 复制到我的角度控制器中：

// don't forget to add gmaps-heatmap.js
    var myLatlng = new google.maps.LatLng(25.6586, -80.3568);
// map options,
    var myOptions = {
        zoom: 3,
        center: myLatlng
    };
// standard map
    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// heatmap layer
    var heatmap = new HeatmapOverlay(map,
        {
            // radius should be small ONLY if scaleRadius is true (or small radius is intended)
            "radius": 2,
            "maxOpacity": 1,
            // scales the radius based on map zoom
            "scaleRadius": true,
            // if set to false the heatmap uses the global maximum for colorization
            // if activated: uses the data maximum within the current map boundaries
            //   (there will always be a red spot with useLocalExtremas true)
            "useLocalExtrema": true,
            // which field name in your data represents the latitude - default "lat"
            latField: 'lat',
            // which field name in your data represents the longitude - default "lng"
            lngField: 'lng',
            // which field name in your data represents the data value - default "value"
            valueField: 'count'
        }
    );

    var testData = {
        max: 8,
        data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1}]
    };

    heatmap.setData(testData);

我把地图放在 HTML 中：

<div class="row">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-user" aria-hidden="true"></i> Mapita de calor
                </div>
                <canvas id="map-canvas"></canvas>
            </div>
        </div>

控制台没有错误，但没有出现映射到页面，为什么？？

【问题讨论】：

谁知道呢。请张贴您的代码丹尼尔。或者甚至更好地发布一些代表您的问题的演示
@MaximShoustin 现在我已经实现了这篇文章。

标签： javascript angularjs heatmap gmaps.js

【解决方案1】：

您需要在 html/css 中设置一些高度和宽度才能显示地图。默认情况下，它们采用 0 高度和 0 宽度。

【讨论】：

【解决方案2】：

添加到Alankar Anand的回答，你还需要有一个回调方法来初始化地图

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY& callback=initMap">
</script>

【讨论】：

那么，我应该在那个方法中插入什么？
我的错。您可以在没有回调方法的情况下执行此操作。而且我能够使用您的代码获取地图。似乎您的问题仅与样式有关。我可以看到样式块吗？
样式块？？我使用引导程序。
对于 Google 地图，地图的高度应明确设置为 100%。所以，你需要在你的CSS中有这个。那是一回事。我注意到您正在使用作为地图的另一件事。将其更改为
。