2

2 つの配列があります。1 つは記事名用で、もう 1 つは各記事への URL リンク用です。情報ウィンドウ内のドロップダウン リストに記事名を入力し、選択すると各記事にリンクしようとしています。

リンクはonchangeイベントの使用に関係しているように見えますが、それ以外の場合は を使用して要素の id タグ "domready" eventListenerにアクセスしています。 ここに私がこれまで持っていた関連コードがありますが、これは機能していません: <select>


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

これが私の解決策です。私の状況では、contenthtml 内ではなく、infowindow の属性内にオプション リスト全体を作成する必要がありました。

したがって、idhtml select 要素の を参照する代わりに、オプション リストを文字列として連結し、オプションを追加するたびにループします (このアプローチでは機能しなかったため、eventListenerはまだわかりません"domready")。

@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
于 2012-06-09T20:37:48.200 に答える