Question

在底部更新

虽然地图确实显示，但点击地图时，下方点击功能内的警报不会显示。顺便说一句，光标看起来像一只手，而不是一个指针。 console.log()结果会显示在浏览器日志中。

我的目标是确定点击的位置并在那里放置一个可拖动的标记，但我甚至无法让听众触发。

以下代码在没有

的情况下运行

  // == Display the map, with some controls and set the initial location 
  var start = new google.maps.LatLng({{center_lat}},{{center_lng}});
  var map = new google.maps.Map(document.getElementById("map-canvas"),{
        center: start,
        zoom: {{map_zoom}},
        mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  console.log("HERE");
  google.maps.event.addListener(map,'click',function(){
      alert('You clicked the map.');
      });

我构建了下面的最小代码来演示我的问题。但是，代码仅适用而不是短语google.maps.event.addListener(map, 'click', function() {}。当包含该短语时，我得到如下错误Uncaught ReferenceError: map is not defined click:24 (anonymous function)

我希望这会有所帮助。

<!DOCTYPE html>
<html>
  <head>
    <script src="//maps.googleapis.com/maps/api/js?sensor=false"
        type="text/javascript"></script>
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; }
    </style>
    <script type="text/javascript">
    function initialize() {
      var map = new google.maps.Map(
        document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(37.4419, -122.1419),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var marker = new google.maps.Marker({
            position: new google.maps.LatLng(37.4419, -122.1419),
            map: map
      });

    }
    google.maps.event.addListener(map, 'click', function() {
  alert('You clicked the map.');
}); 
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Answer 1

我在javascript控制台中获得了Uncaught ReferenceError: map is not defined。

因为您的地图变量未定义。您需要在初始化函数中初始化单击侦听器，其中定义了映射（它是初始化函数的本地函数）。

function initialize() {
  var map = new google.maps.Map(
    document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new google.maps.Marker({
        position: new google.maps.LatLng(37.4419, -122.1419),
        map: map
  });
  google.maps.event.addListener(map, 'click', function() {
    alert('You clicked the map.');
  }); 
}

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

working fiddle

fiddle that exhibits error

地图点击事件未被触发

1 个答案: