使用 Google Map API 通过鼠标悬停在每个圆上创建 InfoWindow 的问题 [英] Problems in Creating InfoWindow on each individual circle with mouseover using Google Map API

问题描述

我在使用 Google Map API 时遇到问题.我想在地图上绘制圆圈并在每个圆圈上创建鼠标悬停事件以打开一个显示时间值的信息窗口.

I am having problems using Google Map API. I want to plot circles on the map and create mouseover event on each circle to open an infowindow displaying the time value.

第一个问题是信息窗口的内容不会因不同的圈子而改变.第二个问题是信息窗口由于某种原因没有弹出.

First problem is the infowindow content does not change for different circles. Second problem is infowindow does not pop up for some reason.

有人可以帮忙吗?

谢谢

代码如下:

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

推荐答案

这是 InfoWindows 在标记上常见的常见问题，可以通过多种方式解决.InfoWindow 没有打开，因为 .open 的可选第二个参数只能是一个标记，否则，您需要设置标记应该打开的位置.我通常使用函数闭包来解决InfoWindow的内容问题(还有其他方法):

This is a common problem usually seen with InfoWindows on markers and can be solved a number of ways. The InfoWindow isn't opening because the optional second parameter of .open can only be a marker, without that, you need to set the position at which the marker should open. I usually use function closure to solve the InfoWindow content problem (there are other ways):

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) {
        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);         
        createClickableCircle(map, circle, data[city].time); 
        counter++;    

    }
    google.maps.event.addDomListener(window, 'load', initialize);
}

function createClickableCircle(map, circle, info){
       var infowindow =new google.maps.InfoWindow({
            content: info
        });  
        google.maps.event.addListener(circle, 'mouseover', function(ev) {
            // alert(infowindow.content);
            infowindow.setPosition(circle.getCenter());
            infowindow.open(map);
        });
 }

(你可能想添加一个监听器来关闭信息窗口.)

(you probably want to add a listener to close the InfoWindow.)

这篇关于使用 Google Map API 通过鼠标悬停在每个圆上创建 InfoWindow 的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！