如何使我的Google Map显示在.NetCore Web应用程序中?

时间:2019-05-23 21:34:29

标签: google-maps-api-3 .net-core google-cloud-platform

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

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

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

site.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上运行应用程序时,我的浏览器未显示地图。为什么我的地图不显示?enter image description here

1 个答案:

答案 0 :(得分:0)

我通过创建新的控制器动作并查看了此问题。然后,我将JavaScript和HTML代码添加到新创建的视图中,并从浏览器和按预期显示的Google地图导航到该控制器操作。