javascript - 为什么 Google Maps API 无法从 HTML 文件中的 JS 访问自定义 CSS 文件?

标签 javascript html css

HTML 与 JS

   <!DOCTYPE html>
    <html>
    <head>    
        <link rel="stylesheet" type="text/css" href="~/css/custom.css" />
    </head>
    <body>
        <h3>My Google Maps Demo</h3>
        <div id="map">
            <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQKR41AqiPXn-2WfLS-ksdsad&callback=initMap"></script>

        <script>
          function initMap() {
              var uluru = { lat: 51.957244, lng: 4.570751 };
              var map = new google.maps.Map(document.getElementById('map'), {
                  zoom: 15,
                  center: uluru
              });
              var marker = new google.maps.Marker({
                  position: uluru,
                  map: map
              });
          }
        </script>
</div>    
    </body>
    </html>

CSS

#map {
    width: 100%;
    height: 400px;
    background-color: grey;
}

具体问题是,当我将 CSS 放入带有 #map 的 HTML 中时, map 显示并有效,但从单独的文件中它只是不显示。为什么?

编辑:通过 Visual Studio 制作 MVC 应用程序

编辑 2:文件位置有问题。我创建了一个新元素并将 CSS 放在一个已经制作好的文件中。现在可以使用了。

最佳答案

首先要做的是 - 将您的脚本标签放入 head 中,然后重试。我怀疑 google map 中有一些奇怪的东西替换了#map 的内容并在此过程中删除了脚本。

关于javascript - 为什么 Google Maps API 无法从 HTML 文件中的 JS 访问自定义 CSS 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47796770/

相关文章:

javascript onclick fade div in(短代码)

javascript - HTML 如果我按 Tab 键,焦点接下来会去哪里?

javascript - 如何使用 jQuery 淡出主 div 并淡入相应单击缩略图的内容

javascript - 如何从循环中获取特定值

html - Bootstrap 在大屏幕上将导航栏移动到其他 div 下方

css - 如何使用 Microsoft Edge 和 Internet Explorer 11 开发人员工具检查伪元素

jquery - 当对象没有类时如何不触发事件

javascript - 如何制作一个可以在没有数据的情况下渲染然后用数据渲染的 react 组件?

javascript - 在调试初学者 javascript 代码时需要帮助

javascript - Jquery响应加载