我正在尝试在地图上添加点击监听器,这是我的代码
更新
<!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>
但是这段代码对我不起作用因为当我点击circle.Plz时,我的窗口没有打开。任何人告诉我在我的代码中缺少了什么.Plz帮助
答案 0 :(得分:4)
也许这个google.maps.event.addDomListener(window, 'load', initialize);
是缺失的。
这是一个有效的例子
我把半径变大了一点。
更新
this有效吗?
更新3
我把它全部放在一个文件中,这样你就可以复制并粘贴它了。
<!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>