Question

我不确定这是什么原因。我复制了示例代码并尝试在localhost上运行Dreamweaver.But由于某些原因我没看到地图被加载。我记得早些时候曾经加载它但是现在它没有加载。我有有效的api密钥，我的网站仍然不公开。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
     <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      var geocoder;
      var map;
      function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = {
          zoom: 8,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
      }

      function codeAddress() {
        var address = document.getElementById('address').value;
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }
    </script>
  </head>
  <body onload="initialize()">
  <!--  <div>
      <input id="address" type="textbox" value="myaddress">
      <input type="button" value="Geocode" onclick="codeAddress()">
    </div>-->
    <div id="map_canvas" style="height:90%;top:30px"></div>
  </body>
</html>

这是最简单的代码，但我仍然无法解决问题。

enter code here

关键价值请求GET /maps/api/js/QuotaService.RecordEvent?1shttp%3A%2F%2Flocalhost%2Fgeoc.html&4e1&5e0&6u1&7sc7c7sc&callback=xdc._papnzo&token=120226 HTTP /1.1

有人可以看看并建议我如何解决这个问题吗？我必须对地址进行地理编码，然后将其传递给地点api。

Answer 1

您需要为地图设置尺寸，这对我有用：

<div id="map_canvas" style="height:500px;width:600px;"></div>

或此CSS：

body, html, #map_canvas {
  height: 100%;
  width: 100%;
}

working example

代码段

var geocoder;
var map;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

body,
html,
#map_canvas {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div>
  <input id="address" type="textbox" value="126 Beacon Avenue Jersey City NJ 07306 USA">
  <input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map_canvas"></div>

Google Maps示例代码未在localhost中运行

1 个答案: