使用Google Map API通过鼠标悬停在每个独立圆上创建InfoWindow时遇到的问题

本文介绍了使用Google Map API通过鼠标悬停在每个独立圆上创建InfoWindow时遇到的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

第一个问题是infowindow内容不会因不同的圈子而改变。
第二个问题是infowindow不会因为某种原因弹出。

有人可以帮忙吗？

谢谢

代码如下：

 函数initialize（）{
 data = {}; 
 data [0] = {
 center：new google.maps.LatLng（51.49799，-0.196145），
人口：1000，
时间：2013-03-01T03： 31：18Z
; 
 data [1] = {
 center：new google.maps.LatLng（51.496294，-0.188184），
人口：1000，
时间：2013-03-01T13： 21：15Z
; 
 data [2] = {
 center：new google.maps.LatLng（51.497817，-0.178313），
人口：1000，
时间：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; 
（var city in data）{
 //构建城市地图中每个值的圆圈。我们将人口增加了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内容问题（还有其他方法）：

$ p $ function initialize（）{ data = {}; data [0] = { center：new google.maps.LatLng（51.49799，-0.196145），人口：1000，时间：2013-03-01T03： 31：18Z ; data [1] = { center：new google.maps.LatLng（51.496294，-0.188184），人口：1000，时间：2013-03-01T13： 21：15Z ; data [2] = { center：new google.maps.LatLng（51.497817，-0.178313），人口：1000，时间：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; 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]。人口/ 20 }; var circle = new google.maps.Circle（populationOptions）; createClickableCircle（地图，圆形，数据[city] .time）; counter ++; google.maps.event.addDomListener（window，'load'，initialize）; function createClickableCircle（map，circle，info）{ var infowindow = new google.maps.InfoWindow（{$ b $ content：info } ）; google.maps.event.addListener（circle，'mouseover'，function（ev）{ // alert（infowindow.content）; infowindow.setPosition（circle.getCenter（）） ; infowindow.open（map）; }）; $ / code>

（您可能想添加一个侦听器来关闭InfoWindow。）p>

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.

Can someone help please?

Thanks

Codes are as followings:

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

解决方案

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时遇到的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！