使用Google Map API在每個單獨圓上創建InfoWindow的問題

Question

我在使用Google Map API時遇到了問題。 我想在地圖上繪製圓圈並在每個圓上創建鼠標懸停事件以打開顯示時間值的信息窗口。

第一個問題是infowindow內容不會因不同的圈子而改變。 第二個問題是infowindow不會因爲某種原因彈出。

有人可以幫忙嗎？

感謝

代碼列示如下：

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

Answer 1

這通常是與信息窗口看到標記一個普遍的問題，可以解決多種方式。 InfoWindow沒有打開，因爲.open的可選第二個參數只能是一個標記，如果沒有這個，你需要設置標記打開的位置。我通常使用的功能關閉，以解決信息窗口內容的問題（還有其他方法）：（你可能要添加一個監聽器關閉信息窗口）

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

Answer 2

我改寫了一下你的javascript以更好的語法和命名變量，你忘記用var定義。

例如，要定義data={};，請使用var data=[];，因爲我可以在下面看到您將它用作包含對象的數組。我還做了一個修復當你在已信息窗口已經打開圈移動光標，其停止閃爍效果：

// 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();方法，歡呼聲。

退房working fiddle with comments.