首页 > 编程语言> > javascript-如何在Visual Studio Web表单中使用Google Maps？

javascript-如何在Visual Studio Web表单中使用Google Maps？

2019-11-20 16:07:00 作者：互联网

请注意,对于这个问题,我从下面的代码中删除了我的API密钥,并替换为API_KEY,但是在我正在测试的代码中,我已经安装了密钥

我在Google Developers Console中生成了一个API密钥(似乎您不需要它来完成即时尝试,但无论如何我都得到了它,无论是否使用它都可以尝试,但这没什么区别).我访问了Google Maps JavaScript API v3“入门”页面,按照说明进行操作,并将此代码复制到记事本中,另存为.html文件,当我在浏览器中打开它时,它可以正常工作：

    <!DOCTYPE html>
    <html>
      <head>
        <style type="text/css">
          html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
        </style>
        <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
        </script>
        <script type="text/javascript">
          function initialize() {
            var mapOptions = {
              center: { lat: -34.397, lng: 150.644},
              zoom: 8
            };
            var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);
          }
          google.maps.event.addDomListener(window, 'load', initialize);
        </script>
      </head>
      <body>
    <div id="map-canvas"></div>
      </body>
    </html>

我想让Google Maps在我使用C#在Visual Studio(2013 Premium)中制作的Web应用程序中工作.我尝试创建一个新的空项目,添加一个Web表单,然后在适当的区域中从上面添加了代码.但是,当我在Chrome或Firefox中进行测试时,浏览器中没有任何内容,而VS中没有错误.这是在Visual Studio中的外观：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication18.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: { lat: -34.397, lng: 150.644},
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div id="map-canvas">
    </div>
    </form>
</body>
</html>

有什么想法我在这里做错了吗？

编辑
这是我右键单击并在Chrome浏览器窗口中选择“查看源代码”时的代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: { lat: -34.397, lng: 150.644},
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>

<body>
    <form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="hi2L1ymHDf4m8B8t0C7bGUHkzJoVY/TtxD8fMRwrGdRBRFyxRBkyp57WUnHCMItu0mDNlYrYGkHtWKhgOW3lB5fBBg4iLd5t9cqMKP5h3yg=" />
</div>

    <div id="map-canvas">
    </div>

<div class="aspNetHidden">

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="C687F31A" />
</div></form>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"dd8420e975b84211bfc48926bc521058"}
</script>
<script type="text/javascript" src="http://localhost:57972/92ec7b1e9f6b45d880f3def8ac954bae/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

解决方法:

在.aspx版本中,您的webforms表单元素是一个block元素,但是因为里面除了地图画布之外没有其他东西,而地图画布的高度为百分比,因此表单的高度为0(即0的100％仍为0).

添加表格{高度：100％； }到CSS,地图应该可见.

通过在地图画布上设置固定高度而不是百分比高度,可以达到类似的效果.

顺便说一句-您的密钥在第3个代码块中可见-我对其进行了编辑,但仍将保留在历史记录中,因此,如果您担心的话,我会生成一个新密钥.

标签：visual-studio-2013,google-maps,javascript,c
来源： https://codeday.me/bug/20191120/2045190.html