Google地图未在点击事件中注册
我正在尝试关注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);
}
});
希望这有助于! :)
嘿,对不起,但我在哪里放第二块代码?在initMap()里面呢?但奇怪的是我设法将所有标记绘制到地图上,并且能够点击标记项目来显示信息窗口,只是当我点击地图时,它不会给我留下虚假消息 – hyperfkcb
您在地图div(div with id =“forecastmap”)上有一个点击监听器,它调用initMap()
函数(onclick="initMap()"
),重新创建地图,丢失可能添加的任何圆。如果我删除它,并添加一个google.maps.event.addDomListenerOnce(document.getElementById("forecastmap"), ...
初始化地图上的第一次点击(只),然后我得到标记和圆圈。
代码片段:
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>
嗯,但我是得到这个错误信息:Uncaught ReferenceError:google没有在addDomListener那里定义 – hyperfkcb
这是一个不同的问题。你没有在你的问题中包含API的负载。按照与答案中相同的方式加载它。 – geocodezip
但jsfiddle中的地图直到第一次点击才显示出来。加载地图时有没有办法注册点击事件? – hyperfkcb
你要找的'addEventListener'而不是'addListener'。 –
@ObsidianAge \t 我试着从这里搜索:developers.google.com/maps/documentation/javascript/events但我没有看到任何addEventListener。你介意给我提供语法吗?因为我将上述内容更改为addEventListener,它告诉我函数未定义 – hyperfkcb
'addEventListener'是[**原始JavaScript方法**](https://developer.mozilla.org/en-US/docs/Web/ API /事件目标/的addEventListener)。我自己并不使用Google Maps,但Google显然有一个'addDomListener':'google.maps.event.addDomListener':https://developers.google。COM /地图/文档/ JavaScript的/示例/事件domListener。 –