在圆上添加点击监听器不起作用 [英] adding click listener on circle is not working
本文介绍了在圆上添加点击监听器不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在地图上添加点击监听器，这里是我的代码
$ b 更新
<！DOCTYPE html>
< html>
< head>
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< / head>
< style>
＃map-canvas {
width：500px;
height：500px;
}
< / style>
< script type =text / javascript>
var cityPoints = {
center：new google.maps.LatLng（41.878113，-87.629798），
id：0，
addr：'avenue0'，
magnitude ：100000
};
var cityCircle;
var infoWindow = new google.maps.InfoWindow（{
content：< div> Hello！World< / div>，
maxWidth：500
}）;
函数初始化（）{
var mapOptions = {
zoom：4，
center：new google.maps.LatLng（31.2330555556，72.3330555556） ，
mapTypeId：google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）;
var populationOptions = {
strokeColor：＃FF0000，
strokeOpacity：1，
strokeWeight：1，
clickable：true，
fillOpacity：0，
map：map，
center：new google.maps.LatLng（31.231867，72.33336），
radius：200000
};
cityCircle = new google.maps.Circle（populationOptions）;
google.maps.event.addListener（cityCircle，'click'，function（ev）{
infoWindow.setPosition（ev.latLng）;
infoWindow。打开（地图）;
}）;
}
initialize（）;
< / script>
< body>
< div id =map-canvas>< / div>
< / body>
< / html>
但是这段代码并不适合我，因为当我点击circle.Plz时，infor窗口没有打开任何一个告诉我在代码中究竟发生了什么.Plz Help
解决方案
也许这个 google.maps .event.addDomListener（window，'load'，initialize）; 是缺少的。
这里是一个工作示例
我将半径稍大一点。
更新
$ b 这个工作？
UPDATE 3
我已将它放在一个文件中，可以复制并粘贴它。
<！DOCTYPE html>
< html>
< head>
< style>
＃map-canvas {
height：100％;
宽度：100％;
}
html，body {
height：100％;
}
body {
margin：0;
padding：0;
}
< / style>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=true>< / script>
< script>
var cityPoints = {
center：new google.maps.LatLng（41.878113，-87.629798），
id：0，
addr：'avenue0'，
magnitude ：100000
};
var cityCircle;
var infoWindow = new google.maps.InfoWindow（{
content：< div> Hello！World< / div>，
maxWidth：500
}）;
函数initialize（）{
var mapOptions = {
zoom：4，
center：new google.maps.LatLng（31.231867，72.33336），
mapTypeId：google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map（document.getElementById（'map-canvas'），
mapOptions）;
var populationOptions = {
strokeColor：＃FF0000，
strokeOpacity：1，
strokeWeight：1，
clickable：true，
fillOpacity：0，
map：map，
center：new google.maps.LatLng（31.231867，72.33336），
radius：200000
};
cityCircle = new google.maps.Circle（populationOptions）;
google.maps.event.addListener（cityCircle，'click'，function（ev）{
infoWindow.setPosition（ev.latLng）;
infoWindow.open（map） ;
}）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< div id =map-canvas>< / div>
< / body>
< / html>
I am trying to add click listener on my map and here is my code for this
update
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<style>
#map-canvas{
width:500px;
height:500px;
}
</style>
<script type="text/javascript">
var cityPoints = {
center: new google.maps.LatLng(41.878113, -87.629798),
id: 0,
addr: 'avenue0',
magnitude: 100000
};
var cityCircle;
var infoWindow = new google.maps.InfoWindow({
content: "<div>Hello! World</div>",
maxWidth: 500
});
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(31.2330555556, 72.3330555556),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var populationOptions = {
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 1,
clickable: true,
fillOpacity: 0,
map: map,
center: new google.maps.LatLng(31.231867, 72.33336),
radius: 200000
};
cityCircle = new google.maps.Circle(populationOptions);
google.maps.event.addListener(cityCircle, 'click', function (ev) {
infoWindow.setPosition(ev.latLng);
infoWindow.open(map);
});
}
initialize();
</script>
<body>
<div id="map-canvas"></div>
</body>
</html>
But this code is not working for me becasue infor window is not opening when i click on circle.Plz any one tell what exactly i am missing in my code.Plz Help
解决方案
Maybe this google.maps.event.addDomListener(window, 'load', initialize); is what is missing.
And here is a working example
I made the radius a little bigger.
UPDATE
Does this work?
UPDATE 3
I've put it all in one file so you can copy and paste it.
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas{
height:100%;
width:100%;
}
html, body {
height: 100%;
}
body {
margin:0;
padding:0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
var cityPoints = {
center: new google.maps.LatLng(41.878113, -87.629798),
id: 0,
addr: 'avenue0',
magnitude: 100000
};
var cityCircle;
var infoWindow = new google.maps.InfoWindow({
content: "<div>Hello! World</div>",
maxWidth: 500
});
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(31.231867, 72.33336),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var populationOptions = {
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 1,
clickable: true,
fillOpacity: 0,
map: map,
center: new google.maps.LatLng(31.231867, 72.33336),
radius: 200000
};
cityCircle = new google.maps.Circle(populationOptions);
google.maps.event.addListener(cityCircle, 'click', function(ev) {
infoWindow.setPosition(ev.latLng);
infoWindow.open(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
这篇关于在圆上添加点击监听器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
