Question

我正在使用Google MAP API在Google地图上显示多个位置，我也生成了密钥，但是当我运行此代码时，它给了我错误 uncaught exception: InvalidValueError: myMap is not a function。

我是否以错误的方式做了任何事情。为什么我会收到此错误

下面的代码键入来自w3schools.com

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 

  <!-- <script src="http://maps.google.com/maps/api/js?sensor=false"      type="text/javascript"></script>  -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap" type="text/javascript"></script> 
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    function myMap() {

    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

    }




      </script>

</body>
</html>

更新

，如果我将本教程与我的API_KEY一起使用，则可以使用，但仅显示为开发版本。 https://github.com/taniarascia/googlemaps

Answer 1

您应该移动此行

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap" type="text/javascript"></script>

在您的myMap函数之后。您可以将其作为<body></body>标签中的最后一个元素。

或者，您可以将其保留在原位置，从API调用中删除callback=myMap，然后在脚本中手动调用它。

此外，您很有可能无法使用此密钥。不要使用密钥（您将获得“仅用于开发目的”的地图）或在开发人员控制台中创建自己的密钥。

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Google Maps Multiple Markers</title>
</head>

<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    function myMap() {

      var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
      ];

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var infowindow = new google.maps.InfoWindow();

      var marker, i;

      for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
          }
        })(marker, i));
      }

    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=myMap" type="text/javascript"></script>
</body>

</html>

Google Map API上的多个位置不起作用

1 个答案: