如何在信息窗口（Google Maps API v3）中填充下拉列表？

Question

我有两个数组：一个用于文章名称，另一个用于每篇文章的 url 链接。我正在尝试使用文章名称填充信息窗口中的下拉列表，并在选择时链接到每篇文章。

似乎链接可能与使用onchange 事件有关，否则我使用"domready" eventListener 来访问<select> 元素的id 标签。

这是我目前拥有的相关代码，不工作：

function setDropDownList(mapMarker, names, links)
{
    // event listener for dropdown list in the map markers' infowindow
    google.maps.event.addListener(mapMarker, "domready", function()
    {
        var articles = document.getElementById("select");

        var nextArticle, nextOption;

        for(var i = 0; i < names.length; i++)
        {
            nextArticle = names[i];
            nextOption = new Option(nextArticle);

            /* add the new option to the option list
             ("null" for IE5, "-1" for all other browsers) */
            try
            {
                articles.add(nextOption, -1);
            }
            catch(e)
            {
                articles.add(nextOption, null);
            }
        }
    });
} // end of function setDropDownList

Answer 1

由于我在放置标记后调用 setDropDownList 函数，因此我删除了该侦听器并添加了一个以在单击标记时显示信息窗口。

演示 http://jsfiddle.net/yV6xv/10/

在进行选择时如何处理 onchange 事件取决于您。现在，它会通过一条消息和一个虚拟链接发出警报。

function setDropDownList(mapMarker, mapInfoWindow, names, links)
{

        var articles = document.getElementById("select");
        articles.onchange = function() {
          alert("Going to link " + links[this.options.selectedIndex]);
        };
        var nextArticle, nextOption;

        for(var i = 0; i < names.length; i++)
        {
            nextArticle = names[i];
            nextOption = new Option(nextArticle);

            /* add the new option to the option list
             ("null" for IE5, "-1" for all other browsers) */
            try
            {
                articles.add(nextOption, -1);
            }
            catch(e)
            {
                articles.add(nextOption, null);
            }
            mapInfoWindow.setContent(document.getElementById("select"));

            google.maps.event.addListener(mapMarker, 'click', function() {
              mapInfoWindow.open(map, this);
            });
    }
} // end of function setDropDownList

我应该补充一点，map 是全局的。

  var map;
  var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP };

  function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var mymarker = new google.maps.Marker({
      map:map,
      position:new google.maps.LatLng(0,0)
    });

    var mynames = ["-- Choose an article --", "How to Launch a Fireball", "The Trinity of Magic", "Defending Against the Hax"];
var mylinks = ["to current page itself #", "http://fireball", "http://trinity", "http://hax"];

    var myinfowindow = new google.maps.InfoWindow();
    setDropDownList(mymarker, myinfowindow, mynames, mylinks);
  }

Answer 2

这是我的解决方案，在我的情况下，我需要在 infowindow 的 content 属性中创建整个选项列表，而不是在 html 中。

因此，我没有引用 html 选择元素的 id，而是简单地将选项列表连接为字符串，循环添加每个选项（我仍然不理解 "domready" eventListener，因为它不适用于这种方法）。

我没有使用@Lilina 优雅的.onchange = function(){... 作为链接，而是使用window.location.href = this.options[this.selectedIndex].value，将每个选项的值属性设置为等于其'url 链接。

这是代码：

function setDropDownList(mapRef, mapMarker, markerInfoWindow, names, links)
{
    var articles = markerInfoWindow.content;
    articles += "<select onchange = \"window.location.href = this.options[this.selectedIndex].value;\">";
    articles += "<option>&nbsp;&mdash;&nbsp;select an article&nbsp;&mdash;&nbsp;</option>";



    var nextArticle, nextArticleLink;

    for(var i = 0; i < names.length; i++)
    {
        nextArticle = names[i];
        nextArticleLink = links[i];

        articles += "<option value = " + nextArticleLink + ">" + nextArticle + "</option>";

        // setting each info window for each map marker with the function below
        setInfoWindow(mapRef, mapMarker, markerInfoWindow);
    }



    articles += "</select>";
    markerInfoWindow.setContent(articles);
} // end of function setDropDownList