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

我插入虚拟消息，以检查是否点击事件已登记。但是，该信息甚至没有打印出来。我想知道哪部分代码错了。

我的HTML DIV：

<div class="box-body"> 

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


           </div> 

谢谢！

Answer 1

注意addListener是不是一个有效的方法，而你要么寻找本地addEventListener()，或谷歌的addDomListener()。

我对谷歌地图不太熟悉，但考虑到地图是动态生成的，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 with 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>