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 中。如果您在 HTML 中嵌入 Javascript，则它只能是文本。您不能神奇地包含对象（例如标记）。这里实际发生的是使用对象标记的一些字符串表示的字符串连接

好吧，实际上你可以神奇地嵌入一个对象，而不是像你做的那样。神奇地将对象与嵌入在 HTML 中的这个 Javascript 函数关联的方法是使用闭包。如果您不熟悉闭包，请在网络上搜索它。最终结果将如下所示（未经测试或其他任何内容）：

 $(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);
    }
}

请注意，这仅适用于一个信息窗口：只有一个名为 fxn 的全局对象。因此，如果您再次调用 create_fxn，您将覆盖 fxn。如果您需要支持多个窗口，您将有一种方法来跟踪它们并将不同的 fxn（使用 create_fxn 创建）包含在列表或其他内容中。

于 2013-10-17T17:51:07.310 回答