2

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

2 回答 2

4

由于我在放置标记后调用 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);
  }
于 2012-06-07T23:39:26.917 回答
1

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

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

我没有.onchange = function(){...对链接使用@Lilina 的优雅，而是使用window.location.href = this.options[this.selectedIndex].value，将每个选项的 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
于 2012-06-09T20:37:48.200 回答