Google地图未在点击事件中注册

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试关注this tutorial以在地图上点击事件时创建一个圈子。这里是地图的tab1.js下初始化：Google地图未在点击事件中注册

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>

谢谢！

回答：

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

希望这有助于！ :)

回答：

您在地图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>

以上是 Google地图未在点击事件中注册 的全部内容， 来源链接： utcz.com/qa/260496.html

回到顶部