Question

以下是我的代码减去谷歌地图键。我没有收到错误，也没有得到地图。我错过了什么？你必须添加你的地图键才能尝试，你可以在这里得到它。 https://developers.google.com/maps/documentation/javascript/get-api-key

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>


  <title>Test Map</title>
</head>
<body>
  <canvas id="map_canvas" width="800" height="auto"></canvas>
  <script >

function initMap() {
  var map;var elevator;
  var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(39.8403, -88.9548),
          mapTypeId: 'roadmap',
        };

  map = new google.maps.Map($('#map_canvas')[0], myOptions);
  var addresses = ['Decatur, Illinois'];
  for (var x = 0; x < addresses.length; x++) {
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x]
   + '&sensor=false', null, function (data) {
              var p = data.results[0].geometry.location;
              var latlng = new google.maps.LatLng(p.lat, p.lng);
              new google.maps.Marker({
                  position: latlng,
                  map: map,
                });
              console.log(p.lat);
            });
  }
}

  </script>
<script  src="https://maps.googleapis.com/maps/api/js?key=KEY GOES HERE=initMap"></script>
</body>
</html

Answer 1

这只是一个快速而愚蠢的想法 - 但你试过给它一个明确的高度吗？如果没有那个我的话就不会出现。

即高度= “400像素”

Answer 2

将<canvas id="map_canvas" width="800" height="auto"></canvas>更改为<div id="map_canvas" style="width: 800px; height: 500px;"></div>。你必须设置自动高度不起作用。

您还需要通过调用initMap();

来运行initMap函数

谷歌地图没有绘图

2 个答案: