Question

我从 Google Charts Maps 页面https://jsfiddle.net/api/post/library/pure/中提供了一个示例，当我将其粘贴到新文件中并保存为 html 时，它正常运行页。但是当我在 aspx 页面中使用相同的内容时，地图无法加载，并且显示此页面未正确加载Google地图。这是我的.aspx页面 -

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['map']});
    google.charts.setOnLoadCallback(drawMap);

    function drawMap () {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');

      data.addRows([
        ['Lake Buena Vista, FL 32830, United States',                  'Walt Disney World'],
        ['6000 Universal Boulevard, Orlando, FL 32819, United States', 'Universal Studios'],
        ['7007 Sea World Drive, Orlando, FL 32821, United States',     'Seaworld Orlando' ]
      ]);

      var options = {
        mapType: 'styledMap',
        zoomLevel: 12,
        showTip: true,
        useMapTypeControl: true,
        maps: {
          // Your custom mapTypeId holding custom map styles.
          styledMap: {
            name: 'Styled Map', // This name will be displayed in the map type control.
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]
              },
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]
              },
              {featureType: 'road.highway',
               elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
              },
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
              }
        ]}}
      };

      var map = new google.visualization.Map(document.getElementById('map_div'));

      map.draw(data, options);
    }
  </script>


</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView runat="server" ID="GvOffcDet" OnRowDataBound="GvOffcDet_RowDataBound" DataKeyNames="OfficeID">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Image runat="server" ImageUrl="~/images/plus.png" Height="20px" Width="20px"  />
                        <asp:Panel runat="server">
                            <asp:GridView runat="server" ID="GvEmpDetails"></asp:GridView>
                        </asp:Panel>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </form>

   <div id="map_div" style="height: 500px; width: 900px"></div>

</body>
</html>

我已复制粘贴示例并将其另存为html文件。在这种情况下，它正在工作，并显示地图。这是代码 -

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['map']});
    google.charts.setOnLoadCallback(drawMap);

    function drawMap () {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');

      data.addRows([
        ['Lake Buena Vista, FL 32830, United States',                  'Walt Disney World'],
        ['6000 Universal Boulevard, Orlando, FL 32819, United States', 'Universal Studios'],
        ['7007 Sea World Drive, Orlando, FL 32821, United States',     'Seaworld Orlando' ]
      ]);

      var options = {
        mapType: 'styledMap',
        zoomLevel: 12,
        showTip: true,
        useMapTypeControl: true,
        maps: {
          // Your custom mapTypeId holding custom map styles.
          styledMap: {
            name: 'Styled Map', // This name will be displayed in the map type control.
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]
              },
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]
              },
              {featureType: 'road.highway',
               elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
              },
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
              }
        ]}}
      };

      var map = new google.visualization.Map(document.getElementById('map_div'));

      map.draw(data, options);
    }
  </script>
</head>
<body>
<div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>

如何在.aspx页面中正确加载地图？

Answer 1

Excerpt from their blog -

截至2016年6月22日，我们对Google进行了以下更改   Maps API标准计划：

我们不再支持无密钥访问（任何   请求不包含API密钥）。未来的产品更新是   仅适用于使用API密钥发出的请求。 API密钥允许我们   在需要时联系开发人员并帮助我们识别行为不端   的实施方式。

谷歌地图图表使用谷歌地图API。最近他们改变了他们的API

因此，使用Google Maps API现在需要一个密钥。如果您在2016年6月22日之后在localhost上使用Google Maps API，则需要使用密钥才能使用

您可以从他们的页面获取密钥 - Get API Key

如何在aspx页面中正确使用谷歌地图图表

1 个答案: