Question

我使用参数标记调用函数 fxn ，但我无法在函数定义中检索其值喜欢它，但我需要打开一个infowindow点击需要打开infowindow on button或div click已经完成但有错误

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

Answer 1

我不是百分百肯定，但我认为问题在于：

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创建）。

在谷歌地图上点击按钮打开infowindow

1 个答案: