Google maps api 3 使用Google Map API在每个圆圈上使用鼠标盖创建信息窗口时遇到的问题
我在使用谷歌地图API时遇到问题。 我想在地图上绘制圆圈,并在每个圆圈上创建鼠标悬停事件,以打开显示时间值的信息窗口 第一个问题是infowindow的内容不会因不同的圈子而改变。 第二个问题是infowindow由于某种原因没有弹出 有人能帮忙吗 谢谢 代码如下:Google maps api 3 使用Google Map API在每个圆圈上使用鼠标盖创建信息窗口时遇到的问题,google-maps-api-3,Google Maps Api 3,我在使用谷歌地图API时遇到问题。 我想在地图上绘制圆圈,并在每个圆圈上创建鼠标悬停事件,以打开显示时间值的信息窗口 第一个问题是infowindow的内容不会因不同的圈子而改变。 第二个问题是infowindow由于某种原因没有弹出 有人能帮忙吗 谢谢 代码如下: function initialize() { data={}; data[0]={ center: new google.maps.LatLng(51.49799,-0.19
function initialize() {
data={};
data[0]={
center: new google.maps.LatLng(51.49799,-0.196145),
population: 1000,
time:"2013-03-01T03:31:18Z"
};
data[1]={
center: new google.maps.LatLng(51.496294,-0.188184),
population: 1000,
time:"2013-03-01T13:21:15Z"
};
data[2]={
center: new google.maps.LatLng(51.497817,-0.178313),
population: 1000,
time:"2013-03-04T04:03:50Z"
};
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(51.494438, -0.188907),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var movingColour= '#FF0000';
var counter=0;
for (var city in data) {
// Construct the circle for each value in citymap. We scale population by 20.
//movingColour=ColorLuminance(movingColour, -0.005) ;
var populationOptions = {
strokeOpacity: 0.35,
strokeWeight: 2,
strokeColor:movingColour,
fillColor:movingColour ,
fillOpacity: 0.35,
map: map,
clickable:true,
center: data[city].center,
radius: data[city].population / 20
};
var circle = new google.maps.Circle(populationOptions);
var infowindow =new google.maps.InfoWindow({
content: data[city].time
});
google.maps.event.addListener(circle, 'mouseover', function(ev) {
alert(infowindow.content);
infowindow.open(map,circle);
});
counter++;
}
google.maps.event.addDomListener(window, 'load', initialize);
}
这是标记上的信息窗口中常见的问题,可以通过多种方式解决。InfoWindow未打开,因为可选的第二个参数.open只能是一个标记,如果没有该参数,则需要设置标记应打开的位置。我通常使用函数闭包来解决InfoWindow内容问题(还有其他方法):
(您可能需要添加一个侦听器来关闭信息窗口。)这是标记上的信息窗口常见的问题,可以通过多种方法解决。InfoWindow未打开,因为可选的第二个参数.open只能是一个标记,如果没有该参数,则需要设置标记应打开的位置。我通常使用函数闭包来解决InfoWindow内容问题(还有其他方法):
(您可能想添加一个侦听器来关闭信息窗口。)我重写了一点您的javascript,以获得更好的语法和命名变量,您忘记了使用
var
定义这些变量
例如定义data={}代码>使用var数据=[]代码>因为我可以在下面看到,您使用它作为包含对象的数组。我还做了一个修复,当您将光标移动到已打开infowindow的圆圈上时,该修复将停止闪烁效果:
// To stop flickering.. we wont reopen until necessary
// We open only if position has been changed or infowindow is not visible
if(infowindow.getPosition() !== this.getCenter() || infowindowClosed === true) {
// this can be used to access data values
infowindow.setContent(this.data.time);
infowindow.setPosition(this.getCenter());
infowindow.open(map);
infowindowClosed = false;
}
其他增强功能包括在initialize()上定义少数全局变量代码>方法,干杯
查看我重写了一点javascript,以获得更好的语法和命名变量,而您忘记了使用var
定义这些变量
例如定义data={}代码>使用var数据=[]代码>因为我可以在下面看到,您使用它作为包含对象的数组。我还做了一个修复,当您将光标移动到已打开infowindow的圆圈上时,该修复将停止闪烁效果:
// To stop flickering.. we wont reopen until necessary
// We open only if position has been changed or infowindow is not visible
if(infowindow.getPosition() !== this.getCenter() || infowindowClosed === true) {
// this can be used to access data values
infowindow.setContent(this.data.time);
infowindow.setPosition(this.getCenter());
infowindow.open(map);
infowindowClosed = false;
}
其他增强功能包括在initialize()上定义少数全局变量代码>方法,干杯
查看