带有信息框的多个标记 谷歌地图API V3

Question

我正在尝试在地图上放置多个标记，并且还可以单独切换它们，以便一次只显示一个标记。以前，我能够完美地加载和切换单个信息框。我试图实现的最终目标是一次只打开一个信息框，并且能够访问单个标记信息框。目前，我有多个标记，但信息框不会与该功能切换。

法典：

var myCenter = new google.maps.LatLng(30.43, -84.285);//Tallahasse
var myHouse = new google.maps.LatLng(30.438329, -84.29116599999998);//MyHouse
//Initilalize map to center on Tallahassee
function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:14,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new Array();
var ib = new Array();
for(var i = 0; i < 2; i++){ // START LOOP -----------------------------
//Marker(This creates the marker, nothing further is needed)
marker[i] = new google.maps.Marker({
  position:myHouse, //Marker Position
  map: map, //Which map this marker is on, defaults to current
  title: 'More Info', // This displays text when the cursor hovers over the marker
  draggable: false,
  icon: 'images/sm1beermug.png'
  });
  var boxText = document.createElement("div");
  boxText.style.cssText = "border: 3px solid #2d2d2d;"; 
  boxText.innerHTML = "<strong><font size="3" color = #222222> Taylor's House </font></strong>";
  //font attribute not supported in HTML5, progress to using css in later revisions
  var myOptions = {
           content: boxText,
          disableAutoPan: false,
          maxWidth: 0,
          pixelOffset: new google.maps.Size(-251, 0),//X axis should be half the size of box width
          zIndex: null,
          boxStyle: { 
            background: "url('tipbox.gif') no-repeat",
            opacity: .94,
            width: "502px"
           },
          closeBoxMargin: "2px 2px 2px 2px",
          closeBoxURL: "images/close.png",
          infoBoxClearance: new google.maps.Size(10, 10),
          isHidden: false,
          pane: "floatPane",
          enableEventPropagation: false
  };
        ib[i] = new InfoBox(myOptions);
        ib[i].open(map, marker[i]);
        ib[i].hide();
        google.maps.event.addListener(marker[i], 'click', function() {
            if(ib[i].getVisible()){
               ib[i].close();
               ib[i].open(map, marker[i]);
               ib[i].hide();
            }
            else{
              ib[i].show();
            }
        });
        myHouse = new google.maps.LatLng(30.41329, -84.29316599999998);
  }//END LOOP ------------------------------      
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

My implementation...
* 初始化变量

var map; // Google map instance
var mapMarkers = Array();
var mapInfoWindows = Array();

我使用以下功能添加和删除标记...

function addMarker(marker, infoWindow) {
    // Update markers and infowindows
    mapMarkers.push(marker);
    mapInfoWindows.push(infoWindow);
    marker.setMap(map);
    google.maps.event.addListener(marker, 'click', function () {
        // Open the window before closing to remove flicker
        infoWindow.open(map, marker);
        for (i in mapInfoWindows) {
            if (mapInfoWindows[i] !== infoWindow) {
                mapInfoWindows[i].close();
            }
        }
    });
}

我的应用程序要求我移除所有标记以进行地图刷新。

function removeMarkers() {
    for (i in mapInfoWindows) {
        mapInfoWindows[i].close();
    }
    for (m in mapMarkers) {
        google.maps.event.clearInstanceListeners(mapMarkers[m]);
        mapMarkers[m].setMap(null);
    }
    mapInfoWindows.length = 0;
    mapMarkers.length = 0;
}

Answer 2

试试这段代码...

google.maps.event.addListener(marker[i], 'click', function() {
        if(ib[i].getVisible()){
           ib[i].setVisible(false);     // hide() and show() are deprecated.
        }
        else{
          ib[i].setVisible(true);       // hide() and show() are deprecated.
        }
    });

Answer 3

使用相同的信息框，每次点击时只需更改内容：

var markers = [];
var map = new google.maps.Map(document.getElementById(divId), mapOptions); 
var infoBox = new InfoBox(getInfoBoxOptions());
    $.each(data, function (i, obj)
    {
        var pos = new google.maps.LatLng(obj.Lat, obj.Lng);
        var marker = _getMarker(map, obj.Name, pos);
        marker.text = '<div> Different content for each marker </div>';
        markers.push(marker);
        google.maps.event.addListener(marker, 'click', function ()
        {
            infoBox.setContent(this.text);
            infoBox.open(map, this);
            map.panTo(this.getPosition());
        });
    });