javascript - 如何在信息窗口(Google Maps API v3)中填充下拉列表？

我有两个数组:一个用于文章名称，另一个用于每个文章的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

最佳答案

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

DEMO 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);
  }

关于javascript - 如何在信息窗口(Google Maps API v3)中填充下拉列表？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10940573/