開放的信息窗口在谷歌點擊按鈕映射

Question

我打電話的功能FXN用參數標記，但我不能夠以檢索它的函數定義 值喜歡它的ID，但我需要打開一個信息窗口是單擊 需要打開信息窗口按鈕或已經完成股利點擊，但有錯誤

$(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

我不是100％肯定，但我認爲這個問題是在這裏：

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

在particu lar，在那裏有標記不會奇蹟般地在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創建）包含在列表中或其他內容中。