0

パラメータ マーカーを使用して関数fxnを呼び出していますが、id のように関数定義でその値を取得できませんが、そのクリックで情報ウィンドウを開く必要があります。ボタンまたは div クリックで情報ウィンドウを開く必要があります。エラー

    $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "empty/GovtEmp.aspx",
            success: function(data) {
                obj = JSON.parse(data);
                var ary = data.split(",");
                mycenter = new google.maps.LatLng(24.6510734558105, 46.7010765075684);
                var mapOptions = {
                    center: mycenter,
                    zoom: 4,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
                for (i = 0; i < obj.POI.length; i++) {
                    var location = new google.maps.LatLng(obj.POI[i].Latitude, obj.POI[i].Longitude);
                  var  marker = new google.maps.Marker({
                        position: location,
                        id: obj.POI[i].Poi_Id,
                        html:   "dataaaaaaaaa",
                        map: map
                    });
                    infowindow = new google.maps.InfoWindow();
                    google.maps.event.addListener(marker, 'click', function(event) {
                        po = 1;
                        $(".AdsDivLeft").css("color", "black");
                        $(".AdsDivLeft").css("background-color", "white");
                        $("#divLft" + this.id).css("color", "green");
                        $("#divLft" + this.id).css("background-color", "yellow");
                        infowindow.setContent(this.html);
                        infowindow.open(map, this);
                    });
                    google.maps.event.addListener(marker, 'mouseover', function(event) {
                        //$("#divLft" + POI[i].Poi_Id).css("color", "black");
                        po = 0;
                        $("#divLft" + this.id).css("color", "green");
                        $("#divLft" + this.id).css("background-color", "yellow");
                        infowindow.setContent(this.html);
                        infowindow.open(map, this);
                    });
                    google.maps.event.addListener(marker, 'mouseout', function(event) {
                        if (po == 0) {
                            $(".AdsDivLeft").css("color", "black");
                            $(".AdsDivLeft").css("background-color", "white");
                            infowindow.close(this.html);
                        }
                    });
                    divPan = document.createElement("div");
                    divPan.id = "divLft" + k;
                    divPan.className = "AdsDivLeft";
                    divPan.style.border = "groove 5px #FDFDFD";
                    divPan.innerHTML = "<div style=\"border:solid 2px red;\" onclick='fxn(\"" + marker + "\")'>Click</div>";
                }
            }
        });
    });

    function fxn(mrkr) {

        alert(mrkr.id);
        infowindow = new google.maps.InfoWindow();
        infowindow.setContent(mrkr.html);
        infowindow.open(map, mrkr);
    }
4

1 に答える 1

0

100% 確信はありませんが、問題は次の場所にあると思います。

divPan.innerHTML = "<div style=\"border:solid 2px red;\" onclick='fxn(\"" + marker + "\")'>Click</div>";

特に、そこにマーカーを置いても、魔法のようにマーカーが html に埋め込まれません。Javascript を HTML に埋め込む場合は、テキストのみにすることができます。オブジェクト (マーカーなど) を魔法のように含めることはできません。ここで実際に行われているのは、オブジェクト マーカーの文字列表現を使用した文字列連結です。

実際には、魔法のようにオブジェクトを埋め込むことができますが、あなたがした方法ではありません。HTML に埋め込まれたこの Javascript 関数にオブジェクトを魔法のように関連付ける方法は、クロージャを使用することです。クロージャーに慣れていない場合は、Web 検索を行ってください。最終結果は次のようになります (テストされていないなど)。

 $(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "empty/GovtEmp.aspx",
        success: function(data) {
            obj = JSON.parse(data);
            var ary = data.split(",");
            mycenter = new google.maps.LatLng(24.6510734558105, 46.7010765075684);
            var mapOptions = {
                center: mycenter,
                zoom: 4,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
            for (i = 0; i < obj.POI.length; i++) {
                var location = new google.maps.LatLng(obj.POI[i].Latitude, obj.POI[i].Longitude);
              var  marker = new google.maps.Marker({
                    position: location,
                    id: obj.POI[i].Poi_Id,
                    html:   "dataaaaaaaaa",
                    map: map
                });
                infowindow = new google.maps.InfoWindow();
                google.maps.event.addListener(marker, 'click', function(event) {
                    po = 1;
                    $(".AdsDivLeft").css("color", "black");
                    $(".AdsDivLeft").css("background-color", "white");
                    $("#divLft" + this.id).css("color", "green");
                    $("#divLft" + this.id).css("background-color", "yellow");
                    infowindow.setContent(this.html);
                    infowindow.open(map, this);
                });
                google.maps.event.addListener(marker, 'mouseover', function(event) {
                    //$("#divLft" + POI[i].Poi_Id).css("color", "black");
                    po = 0;
                    $("#divLft" + this.id).css("color", "green");
                    $("#divLft" + this.id).css("background-color", "yellow");
                    infowindow.setContent(this.html);
                    infowindow.open(map, this);
                });
                google.maps.event.addListener(marker, 'mouseout', function(event) {
                    if (po == 0) {
                        $(".AdsDivLeft").css("color", "black");
                        $(".AdsDivLeft").css("background-color", "white");
                        infowindow.close(this.html);
                    }
                });
                divPan = document.createElement("div");
                divPan.id = "divLft" + k;
                divPan.className = "AdsDivLeft";
                divPan.style.border = "groove 5px #FDFDFD";
                fxn = create_fxn(marker); // Creates a global variable since didn't use var keyword
                divPan.innerHTML = "<div style=\"border:solid 2px red;\" onclick='fxn()'>Click</div>"; // When fxn() is called here, the object marker is known to it because a closure was used.
            }
        }
    });
});

function create_fxn(mrkr) { // This function is a closure since it returns a function that has mrkr enclosed or embedded within it.

    return function(){

        alert(mrkr.id);
        infowindow = new google.maps.InfoWindow();
        infowindow.setContent(mrkr.html);
        infowindow.open(map, mrkr);
    }
}

ただし、これは 1 つの情報ウィンドウに対してのみ機能することに注意してください。fxn という名前のグローバル オブジェクトは 1 つだけです。したがって、create_fxn をもう一度呼び出すと、fxn が上書きされます。複数のウィンドウをサポートする必要がある場合は、それらを追跡し、別の fxn (create_fxn で作成) をリストなどに含める方法があります。

于 2013-10-17T17:51:07.310 に答える