无法在多个标记上附加多个信息框谷歌地图 v3

Question

我的 phonegap 应用中有一个谷歌地图。我在我的 sqlite 数据库中执行了一个查询，在返回的每一行中，我将它推送到我的 key-value-pair 数组中。我能够根据数组的内容放置标记。我要做的是为每个标记附加和信息框。所有标记都有自己的信息窗口，但是，每个窗口的内容是我的key-value-pair 数组中最后一个索引的数据。这是我的代码

function HotelsQuery(){
 appDB.transaction(function(tx) {
     tx.executeSql("SELECT e.name, e.lat, e.lng, e.tel_num, e.phone_num, e.secondary_num, e.address FROM establishment e INNER JOIN places_cat_categorize p ON e.place_id = p.places_id WHERE p.cat_id = 40",[],function(tx, res) {
      console.log("Returned rows in HotelsQuery= " + res.rows.length);

      var hotels = [];
      for (var i = 0; i < res.rows.length; i++) {
       hotels.push({"name": res.rows.item(i).name , "lat": res.rows.item(i).lat, "lng": res.rows.item(i).lng, "tel_num": res.rows.item(i).tel_num, "phone_num": res.rows.item(i).phone_num, "secondary_num": res.rows.item(i).secondary_num, "address": res.rows.item(i).address});
      }

      console.log('Hotels: ' + hotels[0].name);
      console.log(hotels.length);

      for(var x = 0; x < hotels.length ; x++){
        console.log('Hotels Name: '+hotels[x].name);
        console.log('Hotels Lat: '+hotels[x].lat);
        console.log('Hotels Lng: '+hotels[x].lng);
        console.log('Hotels tel_num: '+hotels[x].tel_num);
        console.log('Hotels phone_num: '+hotels[x].phone_num);
        console.log('Hotels secondary_num: '+hotels[x].secondary_num);
        console.log('Hotels address: '+hotels[x].address);

        var marker = new google.maps.Marker({
        position: new google.maps.LatLng (hotels[x].lat, hotels[x].lng),
        map: map
        });


        var contentString = '<div class="infobox-blue"><h1>'+hotels[x].name+'</h1><p>'+hotels[x].address+'</p><p>'+hotels[x].tel_num+'</p></div>';

        var infobox = new InfoBox({
        content: contentString,
        disableAutoPan: false,
        maxWidth: 150,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: {
        background: "url('images/blue-tipbox.gif') no-repeat",
        opacity: 0.75,
        width: "280px"
        },
        closeBoxMargin: "12px 4px 2px 2px",
        closeBoxURL: "images/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1)
        });
        google.maps.event.addListener(marker, 'click', function() {
          alert();
          infobox.open(map, this);
        //map.panTo(loc);
        });
    }



     });
  });
  $("#mypanel").panel( "close" );
}

Answer 1

在 google.maps.event.addListener event 例如

上设置您的内容

google.maps.event.addListener(marker, 'click', function() {
   var contentString = '<div class="infobox-blue"><h1>'+hotels[x].name+'</h1><p>'+hotels[x].address+'</p><p>'+hotels[x].tel_num+'</p></div>';
   infobox.setContent(content);
   infobox.open(map, this);       
});

Demo

var hotels = [];
function HotelsQuery() {
    appDB.transaction(function(tx) {
      tx.executeSql("SELECT e.name, e.lat, e.lng, e.tel_num, e.phone_num, e.secondary_num, e.address FROM establishment e INNER JOIN places_cat_categorize p ON e.place_id = p.places_id WHERE p.cat_id = 40", [], function(tx, res) {
        console.log("Returned rows in HotelsQuery= " + res.rows.length);

        for (var i = 0; i < res.rows.length; i++) {
            hotels.push({
                "name": res.rows.item(i).name,
                "lat": res.rows.item(i).lat,
                "lng": res.rows.item(i).lng,
                "tel_num": res.rows.item(i).tel_num,
                "phone_num": res.rows.item(i).phone_num,
                "secondary_num": res.rows.item(i).secondary_num,
                "address": res.rows.item(i).address
            });
        }
      });
    });
  getLocationSuccess() ;    
}

function getLocationSuccess() {

  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 12,
    center: new google.maps.LatLng(hotels[0].lat, hotels[0].lng),
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  });

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

  var marker, i;
  var bounds = new google.maps.LatLngBounds();

  var icon = {
    url: "img/map_pin.png", //url
    scaledSize: new google.maps.Size(50, 50), //scaled size
    origin: new google.maps.Point(0,0), //origin
    anchor: new google.maps.Point(0, 0) //anchor
  };

  google.maps.event.addListenerOnce(map, 'idle', function () {
     google.maps.event.trigger(map, 'resize');
     map.setCenter(new google.maps.LatLng(hotels[0].lat, hotels[0].lng));
  }); 

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

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(hotels[i].lat, hotels[i].lng),     
      map: map,
      icon: icon
    });   


   google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
       var contentString = '<div class="infobox-blue"><h1>'+hotels[i].name+'</h1><p>'+hotels[i].address+'</p><p>'+hotels[i].tel_num+'</p></div>';
       infowindow.setContent(contentString);
       infowindow.open(map, marker);
    }
  })(marker, i));
 }   

}