Question

我们可以在谷歌地图中一次只显示一个信息窗口，多个信息窗口可以显示多个标记。

意思是，当我点击标记时，隐藏/关闭其他信息窗口＆amp;仅显示当前标记infowindow。

感谢。

Answer 1

我解决它的方式如下

var infoWindowsOpenCurrently;// A temporarily variable to save currently opened info window
google.maps.event.addListener(marker, 'click', function() {
  typeof infoWindowsOpenCurrently !== 'undefined' && infoWindowsOpenCurrently.close();//if variable is defined close
  infowindow.open(map, marker);
  infoWindowsOpenCurrently = infowindow;//set current info window to temporary variable
});

Answer 2

以下是我一次显示单个标记时使用的javascript代码。

经过近3个小时的搜索后，如果以这种方式添加多个标记，我会以简单的方式解决它

var markerArray=[];

  for (var i = 0; i < markers.length; i++)
            {
                var newMarker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng(markers[i].Latitude, markers[i].Longitude),
                    title: markers[i].Name + ", "+ markers[i].Address,
                    draggable: false
                });

                var statusStr;
                //Set marker icon depending upon current stage
                switch (markers[i].Stage)
                {
                    //Stage 1 - Brochure
                    case 5: newMarker.setIcon(stage1MarkerImage);
                        statusStr = 'Current Status - <select id="status"> <option id="5" value="Brochure" selected="selected">Brochure</option><option id="6" value="Demo">Demo</option><option id="7" value="Site Visit">Site Visit</option><option id="8" value="Lease Approval">Lease Approval</option></select>';
                        break;
                        //Stage 2 - Demo
                    case 6: newMarker.setIcon(stage2MarkerImage);
                        statusStr = 'Current Status - <select id="status"> <option id="5" value="Brochure" >Brochure</option><option id="6" value="Demo" selected="selected">Demo</option><option id="7" value="Site Visit">Site Visit</option><option id="8" value="Lease Approval">Lease Approval</option></select>';
                        break;
                        //Stage 3 - Site Visit
                    case 7: newMarker.setIcon(stage3MarkerImage);
                        statusStr = 'Current Status - <select id="status"> <option id="5" value="Brochure" >Brochure</option><option id="6" value="Demo" >Demo</option><option id="7" value="Site Visit" selected="selected">Site Visit</option><option id="8" value="Lease Approval">Lease Approval</option></select>';
                        break;
                        //Stage 4 - Lease Approval
                    case 8: newMarker.setIcon(stage4MarkerImage);
                        statusStr = 'Current Status - <select id="status"> <option id="5" value="Brochure" >Brochure</option><option id="6" value="Demo" >Demo</option><option id="7" value="Site Visit" ><Site Visit/option><option id="8" value="Lease Approval" selected="selected">Lease Approval</option></select>';
                        break;
                }



                newMarker["infoWindow"] = new google.maps.InfoWindow({
                    content:
                 '<div class="infoWindow">' +
                '<header>' + markers[i].Name + '</header>' +
                '<div style="clear: both;"></div>' +
                '<div class="content">' +
                '<p>' + markers[i].Address + ', ' + markers[i].City + ', ' + markers[i].State + ', ' + markers[i].CountryName + '</p>' +
                '<p>' +
                 statusStr+
                '<label id="update-status" onclick="updateCustomerStep(this);" data-id="' + markers[i].Id + '" >Update</label>' +
                '</p>' +
                '</div>' +
                '</div>'
                });

                google.maps.event.addListener(newMarker, 'click', function () {

                    for (var i = 0; i < markerArray.length; i++)
                    {
                        var currentMarker = markerArray[i];
                        currentMarker["infoWindow"].close();
                        console.log(currentMarker);
                    }

                    this['infoWindow'].open(map, this);

                });

                markerArray.push(newMarker);
            }

Answer 3

我使用了你的代码，并以此结束：

var markerArray = [];//necessary???

var infoHTML = '<div class="infoWindow"><header></header><div style="clear: both;"></div><div class="content"><p class="address"></p><p>Current Status - <select id="status"> <option value="5">Brochure</option><option value="6">Demo</option><option value="7">Site Visit</option><option value="8">Lease Approval</option></select><label>Update</label></p></div></div>';

//One infoWindow with dynamic content
var infoWindow = new google.maps.InfoWindow({
    content: infoHTML
});

$(infoWindow).find("label").on('click', function() {
    var stage = $(this).prev("select").val();
    var marker = $(this).data('marker')
    marker.data.Stage = stage;
    updateCustomerStep(marker, stage);
});

function openInfoWin() {
    var data = this.data;
    var $infoWindow = $(infoWindow);
    var $select = $infoWindow.find("select").val(data.Stage);
    $infoWindow.find("label").data('marker',this);
    $infoWindow.find("header").text(data.Name);
    $infoWindow.find(".address").text([data.Address, data.City, data.State, data.CountryName].join(', '));
    infoWindow.open(map, this);
}

for (var i = 0; i < markers.length; i++) {
    var data = markers[i];

    newMarker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(data.Latitude, data.Longitude),
        title: data.Name + ", " + data.Address,
        draggable: false
    });

    //Set marker icon depending upon current stage
    switch (data.Stage) {
        case 5: newMarker.setIcon(stage1MarkerImage); break;//Stage 1 - Brochure
        case 6: newMarker.setIcon(stage2MarkerImage); break;//Stage 2 - Demo
        case 7: newMarker.setIcon(stage3MarkerImage); break;//Stage 3 - Site Visit
        case 8: newMarker.setIcon(stage4MarkerImage); break;//Stage 4 - Lease Approval
    }

    newMarker.data = data;
    google.maps.event.addListener(newMarker, 'click', openInfoWin);
    markerArray.push(newMarker);//necessary???
}

注意：

未测试
状态选项现在的值等于id。
除非在代码中使用elenet，否则不再需要markerArray。
需要修改函数updateCustomerStep以使用形式变量（标记，阶段）。

如何在google maps api v3中一次只显示一个infowindow

3 个答案: