google-maps-api-3 - 如何让我的 Google 地图显示在 .NetCore Web 应用程序中？

问题描述

我正在遵循https://developers.google.com/maps/documentation/javascript/importing_data中的教程。当我运行我的应用程序时，我可以在我的开发工具中看到我从服务器收到 200 响应，但我的地图没有显示。我没有控制台错误。

我从谷歌云获得了我的 API 密钥。我正在使用 Maps JavaScript API。我的帐单已启用。这是一个干净的 .Net 核心 Web 应用程序。

索引.html

<div id="map"></div>
    <script>
        var map;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 2,
                center: new google.maps.LatLng(2.8,-187.3),
                mapTypeId: 'terrain'
            });

            // Create a <script> tag and set the USGS URL as the source.
            var script = document.createElement('script');
            // This example uses a local copy of the GeoJSON stored at
            // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
            script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
            document.getElementsByTagName('head')[0].appendChild(script);
        }

// Loop through the results array and place a marker for each
// set of coordinates.
        window.eqfeed_callback = function(results) {
            for (var i = 0; i < results.features.length; i++) {
                var coords = results.features[i].geometry.coordinates;
                var latLng = new google.maps.LatLng(coords[1],coords[0]);
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map
                });
            }
        }
    </script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
</script>

网站.css

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
    height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

当我在 localhost 或 Azure 上运行应用程序时，我的浏览器不显示地图。为什么我的地图不显示？

标签： google-maps-api-3.net-coregoogle-cloud-platform

google-maps-api-3 - 如何让我的 Google 地图显示在 .NetCore Web 应用程序中？

问题描述

解决方案

推荐阅读