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 =＆＃34; forecastmap＆＃34;），它调用initMap()函数（onclick="initMap()"），重新创建地图，丢失您可能添加的任何圆圈。如果我将其删除，并添加google.maps.event.addDomListenerOnce(document.getElementById("forecastmap"), ...在第一次点击（仅限）时初始化地图，那么我会得到标记和圆圈。

proof of concept fiddle

代码段

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

Google地图未在点击事件

2 个答案: