Question

我正在尝试使用de API谷歌地图，当我点击标记时，我试图显示一个信息窗口，但在devtools中显示：

main.js：56未捕获的ReferenceError：未定义地图（...）

我发现我的addlistener应该在函数geocodeaddress 中，但它仍然没有显示:( 这是我的代码：

 function initMap() {
        // Create a map object and specify the DOM element for display.
         var  latlng = new google.maps.LatLng(21.1528213,-101.7136297);
          var mapCanvas = document.getElementById("mapa");
          var OpcionesMapa = {center: latlng, zoom: 12};
          var map = new google.maps.Map(mapCanvas, OpcionesMapa);

         // marcador.setMap(map);
         var geocoder = new google.maps.Geocoder();

         document.getElementById('submit').addEventListener('click', function(){
          geocodeAddress(geocoder, map);
         });



        }

  function geocodeAddress(geocoder, resultsMap) {
    var pinColor = "01A9DB"; //Blue
var pinImage = new        google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor, 
    new google.maps.Size(21, 34), 
    new google.maps.Point(0,0),
    new google.maps.Point(10, 34));

   var address = document.getElementById('domicilio').value;
  geocoder.geocode({'address': address}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      resultsMap.setCenter(results[0].geometry.location);
      marker = new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location,
        icon: pinImage

      });
      var infowindow = new google.maps.InfoWindow({
        content: 'Hello'

});

        google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
      });


    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

Answer 1

您在函数Uncaught ReferenceError: map is not defined(…)中收到错误geocodeAddress(geocoder, resultsMap)，因为在该函数内部，map未定义。该例程中google.maps.Map对象的名称为resultsMap。

  marker = new google.maps.Marker({
    map: resultsMap,
    position: results[0].geometry.location,
    // icon: pinImage

  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Hello'
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(resultsMap, marker);
  });

代码段

＆＃13;

function initMap() {
  // Create a map object and specify the DOM element for display.
  var latlng = new google.maps.LatLng(21.1528213, -101.7136297);
  var mapCanvas = document.getElementById("mapa");
  var OpcionesMapa = {
    center: latlng,
    zoom: 12
  };
  var map = new google.maps.Map(mapCanvas, OpcionesMapa);

  var geocoder = new google.maps.Geocoder();

  document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder, map);
  });
}

function geocodeAddress(geocoder, resultsMap) {

  var address = document.getElementById('domicilio').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      resultsMap.setCenter(results[0].geometry.location);
      marker = new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location,
      });
      var infowindow = new google.maps.InfoWindow({
        content: 'Hello'
      });

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(resultsMap, marker);
      });

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, "load", initMap);

＆＃13;

html,
body,
#mapa {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="domicilio" value="Leon, Guanajuato" />
<input id="submit" type="button" value="submit" />
<div id="mapa"></div>

＆＃13;

**

无法在Google地图V3上显示InfoWindow（地图未定义）

1 个答案: