Google Maps API - 在悬停时显示相同文本的信息

时间:2014-02-11 18:04:52

标签: api google-maps

我有以下代码设置来显示自定义Google地图界面。我想在每个标记悬停时显示信息,每个标记都有动态文本(第一个位置)。由于某种原因,此代码导致每个标记显示相同的文本,最终只是位置数组中最后一个元素的第一个单词。

我不明白我做错了什么,因为数组中的其他动态元素每次都会在循环中改变,并且设置正确。

    var locations_parks = [


     ['Mahoney Park', 45.39928, -75.74984, 1, '', 'parks/mahoney.png'],    
     ['Clare Gardens Park', 45.38800, -75.74689, 1, '', 'parks/clare-gardens.png'],    
     ['Iona Park', 45.42153, -75.69719, 1, '', 'parks/iona.png'],    
     ['Parkdale Park', 45.40198, -75.72986, 1, '', 'parks/parkdale.png'],    
     ['Champlain Park', 45.42153, -75.69719, 1, '', 'parks/champlain.png'],    
     ['Lions Park', 45.39417, -75.75269, 1, '', 'parks/lion.png'],    
     ['Fisher Park', 45.39573, -75.73047, 1, '', 'parks/fisher.png'],    
     ['McCormick Park', 45.40281, -75.72716, 1, '', 'parks/mccormick.png'],    
     ['Hintonburg Park', 45.39906, -75.72019, 1, '', 'parks/hintonburg.png'],    
     ['Riverside Terrace Park', 45.39982, -75.75279, 1, '', 'parks/riverside-terrace.png'],    
     ['Plouffe Park', 45.40680, -75.71397, 1, '', 'parks/plouffe.png'],
     ['Laroche Park', 45.42153, -75.69719, 1, '', 'parks/laroche.png'],
     ['Base Marker', 45.402169, -75.726418, 1, 'Base', 'well_icon.png']

];




var markersArray = [];
var iconBase = 'http://www.doamin.com/_icons/';
var mapOptions = {

      center: new google.maps.LatLng(45.402169, -75.726418),
      zoom: 15,
      scrollwheel: false,
      scaleControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);


function initialize() {


    //var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations_parks.length; i++) {  


      var infowindow = new google.maps.InfoWindow({
        content: locations_parks[i][0]
      });


      if (locations_parks[i][4] == "Base") {
              marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations_parks[i][1], locations_parks[i][2]),
                map: map
                ,icon: iconBase + locations_parks[i][5]
                ,url: locations_parks[i][4]
                ,zIndex:900
              });
      } else {
              marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations_parks[i][1], locations_parks[i][2]),
                map: map
                ,icon: iconBase + locations_parks[i][5]
                ,url: locations_parks[i][4]
                ,animation: google.maps.Animation.DROP
                ,zIndex:100
              });
      } 

      markersArray.push(marker);

      google.maps.event.addListener(marker, 'mouseover', function() {
            infowindow.open(map,this);
       });

      google.maps.event.addListener(marker, 'mouseout', function() {
            infowindow.close();
       });


    }


  }


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

1 个答案:

答案 0 :(得分:1)

关闭问题。您必须围绕事件侦听器关闭infowindow,例如:

    (function(infowindow) {

        google.maps.event.addListener(marker, 'mouseover', function() {
            infowindow.open(map, this);
        });

        google.maps.event.addListener(marker, 'mouseout', function() {
            infowindow.close();
        });
    })(infowindow);