Question

我的Javascript和API KEY有问题。我只希望此代码在浏览器中显示地图，但仍无法找到API KEY。

之前我曾使用谷歌地图几次，但我没有这些问题。

我希望你能帮助我！

这是我的代码

<!DOCTYPE html>
<html>
<head >

    <title>maps</title>
    <style type="text/css">
        body {
            height: 100%;
            margin: 0;
            padding: 0
        }
    </style>
</head>
<body>



<!-- Load the Google API: -->

 <script src="http://maps.googleapis.com/maps/api/js"></script>

<script>
var map = {};    
var mapCenter = new google.maps.LatLng(51.0, 1.5); 
var trackList = [];  
var trackSymbolSize = 1.0; 

var MAX_NUMBER_OF_TRACKS = 100000;
var EXCEPTION_AT_LOGICAL_ERROR = true;
var CONSOLE_LOG = true;

function initMap() {
    var mapProp = {
        center: mapCenter,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    document.getElementById("googleMap").style.height = innerHeight + 'px';
    document.getElementById("googleMap").style.width = innerWidth + 'px';

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

function browserResize() {
    document.getElementById("googleMap").style.height = innerHeight + 'px';
    document.getElementById("googleMap").style.width = innerWidth + 'px';

    google.maps.event.trigger(map, 'resize');
}

</script>

<script>

    google.maps.event.addDomListener(window, 'load', initMap);

</script>

<div id="googleMap"></div>

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuZVG0Z9Ei7ubm5bkAfPsYUI-Wm8C_c-0&callback=initMap" async defer></script>

</body>

</html>

Answer 1

试试这样。

<!DOCTYPE html>
<html>

<head>

  <title>maps</title>
  <style type="text/css">
    body {
      height: 100%;
      margin: 0;
      padding: 0
    }
  </style>
  <!-- Load the Google API: -->

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuZVG0Z9Ei7ubm5bkAfPsYUI-Wm8C_c-0&callback=initMap" async defer></script>
</head>

<body>
  <div id="googleMap"></div>
  <script>
    var map = {};
    var mapCenter
    var trackList = [];
    var trackSymbolSize = 1.0;

    var MAX_NUMBER_OF_TRACKS = 100000;
    var EXCEPTION_AT_LOGICAL_ERROR = true;
    var CONSOLE_LOG = true;

    function initMap() {
      mapCenter = new google.maps.LatLng(51.0, 1.5);
      var mapProp = {
        center: mapCenter,
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };


      document.getElementById("googleMap").style.height = innerHeight + 'px';
      document.getElementById("googleMap").style.width = innerWidth + 'px';

      map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    }

    function browserResize() {
      document.getElementById("googleMap").style.height = innerHeight + 'px';
      document.getElementById("googleMap").style.width = innerWidth + 'px';

      google.maps.event.trigger(map, 'resize');
    }
  </script>


</body>

</html>

Google Maps API V3 API密钥无法加载

1 个答案: