Google地图未在点击活动中注册

Question

我想跟随this tutorial在点击事件的地图上创建一个圆圈。这是tab1.js下的地图初始化：

function initMap() {
    forecastmap = new google.maps.Map(document.getElementById('forecastmap'), {
      center: {lat: 1.352083, lng: 103.81983600000001},
      zoom: 11
    });
    forecastmap.addListener('click', function(e) {
        createBuffer(e.latLng, forecastmap);
    });

    geocoder = new google.maps.Geocoder();
    infowindow = new google.maps.InfoWindow();
}

然后在我的tab2.js里面，我执行所有逻辑来添加标记：

function createBuffer(coord, forecastmap) {
    console.log('come in');
    var marker = new google.maps.Marker({
        position: coord,
        map: forecastmap
    });
    clusterData.push(marker);

    marker = new google.maps.Circle({
        center: coord,
        map: forecastmap,
        strokeColor: '#000',
        strokeWeight: 2,
        strokeOpacity: 0.5,
        fillColor: '#f0f0f0',
        fillOpacity: 0.5,
        radius: 20 * 1000
    });
    clusterData.push(marker);
}

我插入了一条虚拟消息来检查是否已注册click事件。但是，消息甚至没有打印出来。我想知道代码的哪一部分是错的。

我的HTML div：

<div class="box-body">

                                      <div id="forecastmap" style="width:100%;height:350px" onclick="initMap();"></div>


                                </div>

谢谢！

Answer 1

请注意，addListener不是一种有效的方法，您要么寻找原生的addEventListener()，要么是Google的addDomListener()。

我对Google地图不太熟悉，但考虑到地图是动态生成的，forecastmap变量可能无法在页面加载时使用。因此，您需要将范围提升到页面加载时可用的元素，并使用event delegation。

代替：

forecastmap.addListener('click', function(e) {
    createBuffer(e.latLng, forecastmap);
});

你可能需要这样的东西：

document.getElementsByTagName('body')[0].addEventListener("click", function(e) {
  // Check that the click target is #forecastmap
  if (e.target && e.target.id == "forecastmap") {
    createBuffer(e.latLng, forecastmap);
  }
});

希望这可以帮助！ :)

Answer 2

你在地图div（div = id =“forecastmap”）上有一个点击监听器，它调用initMap()函数（onclick="initMap()"），重新创建地图，丢失你可能添加的任何圆圈。如果我删除它，并添加一个google.maps.event.addDomListenerOnce(document.getElementById("forecastmap"), ...初始化地图在第一次点击（仅），然后我得到标记和圆圈。

proof of concept fiddle

代码段：

var forecastmap;

function initMap() {
  forecastmap = new google.maps.Map(document.getElementById('forecastmap'), {
    center: {
      lat: 1.352083,
      lng: 103.81983600000001
    },
    zoom: 11
  });
  forecastmap.addListener('click', function(e) {
    createBuffer(e.latLng, forecastmap);
  });

  geocoder = new google.maps.Geocoder();
  infowindow = new google.maps.InfoWindow();
}
// google.maps.event.addDomListener(window, 'load', function() {
google.maps.event.addDomListenerOnce(document.getElementById('forecastmap'), "click", initMap);
// });

function createBuffer(coord, forecastmap) {
  console.log('come in');
  var marker = new google.maps.Marker({
    position: coord,
    map: forecastmap
  });
  // clusterData.push(marker);

  marker = new google.maps.Circle({
    center: coord,
    map: forecastmap,
    strokeColor: '#000',
    strokeWeight: 2,
    strokeOpacity: 0.5,
    fillColor: '#f0f0f0',
    fillOpacity: 0.5,
    radius: 20 * 1000
  });
  // clusterData.push(marker);
}

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="box-body">
  <div id="forecastmap" style="width:100%;height:350px"></div>
</div>