Question

我有这个简化的代码，可以创建一个谷歌地图，并允许我将文本注入地图InfoWindow泡泡。

但这是问题所在。目前函数fnGetNewTextForInfoWindow（）的任务是微不足道的。但是，如果我更改fnGetNewTextForInfoWindow（）的内容以调用需要几百毫秒的jquery .ajax查询。这导致数据迟到。我认为需要一个“闭包”函数，但我无法保持调用函数的上下文。需要指导。感谢

<!DOCTYPE html>
<html>
<head>

<style>
#map-canvas, #side-bar {        
    height: 500px;
    width: 600px;        
}

</style>

<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>           
<script src="jquery.js" type="text/javascript"></script> 
<script type="text/javascript">

//  "use strict";

    // variable to hold a map
    var map;

    // variable to hold current active InfoWindow
    var activeInfoWindow ;      

    // ------------------------------------------------------------------ //
    // initialize function      
    // ------------------------------------------------------------------ //
      function initialize() {

        // map options  
        var mapOptions = {
          zoom : 10,
          draggable: true,
          center : new google.maps.LatLng(44.9600, -93.1000),
          mapTypeId : google.maps.MapTypeId.ROADMAP
        };

        // create map in div called map-canvas using map options defined above
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        // define two Google Map LatLng objects representing geographic points
        var stPaul          = new google.maps.LatLng(44.9522,-93.0892);
        var minneapolis     = new google.maps.LatLng(44.9792,-93.2662);

        // place two markers
        fnPlaceMarkers(stPaul,"St Paul");
        fnPlaceMarkers(minneapolis,"Minneapolis");          
      }

    // -------------------------------------------------------------- //
    // create markers on the map
    // ------------------------------------------------------------- //
    function fnPlaceMarkers(myLocation,myCityName){

        var marker = new google.maps.Marker({
            position : myLocation
        });

        // Renders the marker on the specified map
        marker.setMap(map); 

        // create an InfoWindow
        var infoWnd = new google.maps.InfoWindow();         

        // add content to your InfoWindow
        infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' +  myCityName + '</div>');

        // add listener on InfoWindow - close last infoWindow  before opening new one 
        google.maps.event.addListener(marker, 'click', function() {

        //Close active window if exists - [one might expect this to be default behaviour no?]               
        if(activeInfoWindow != null) activeInfoWindow.close();

        // get latest text
        var newText = fnGetNewTextForInfoWindow();
        infoWnd.setContent(newText);

        // Open InfoWindow
        infoWnd.open(map, marker, newText);

        // Store new open InfoWindow in global variable
        activeInfoWindow = infoWnd;
    });                             
            }

    function fnGetNewTextForInfoWindow(){
        var newText = $('#idSomeNewText').val();
        return newText;
    }

    // ---------------------------------------------------------- //
    // initial load
    // -----------------------------------------------------------//       
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Enter Some text to insert in marker:
    <input id='idSomeNewText' type="text" name="firstname" value="test value">  
<br/>  <br/>  
    <div id="map-canvas"></div>

<br/>
<br/>

</body>
</html>

-----补充说： fnGetNewTextForInfoWindow（）看起来像这样......

function fnGetNewTextForInfoWindow() {
    $.ajax({
        type: "POST",
        dataType : 'json',
        data: { key1: "value"} ,                
        url: "myProgram",       
        success: function(data) {           
            // I need this value to display in infoWindow
            var newText =  new google.maps.LatLng(markerData[i]['newStatus'],  markerData[i]['newOwner']);
        },  // end success
        error: function (jqXHR, textStatus, errorThrown) { 
            // something bad happened
        }
    });  // end ajax
};

---------编辑 - 按照Mouser的修订

// -------------------------------------------------------------- //
    // create markers on the map
    // ------------------------------------------------------------- //
    function fnPlaceMarkers(myLocation,myCityName){

        var marker = new google.maps.Marker({
            position : myLocation
        });

        // Renders the marker on the specified map
        marker.setMap(map); 

        // create an InfoWindow
        var infoWnd = new google.maps.InfoWindow();         

        // add content to your InfoWindow
        infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' +  myCityName + '</div>');

        // add listener on InfoWindow - close last infoWindow  before opening new one 
        google.maps.event.addListener(marker, 'click', function() {

        //Close active window if exists - [one might expect this to be default behaviour no?]               
        if(activeInfoWindow != null) activeInfoWindow.close();

        // get latest text
        // var newText = fnGetNewTextForInfoWindow();
        // infoWnd.setContent(newText);

         // pass infoWnd
         fnGetNewTextForInfoWindow(infoWnd);

        // Open InfoWindow
        // infoWnd.open(map, marker, newText);

        // Store new open InfoWindow in global variable
        //activeInfoWindow = infoWnd;
    });                             

}

    // ---------------------------------------------------------- //
    // 
    // -----------------------------------------------------------//       

    function fnGetNewTextForInfoWindow(infoWindow){
    var infoWnd = infoWindow
    //$.ajax( "data.xml" )
    $.ajax( "example.php" )
    .done(function(data) {
         var newText = data;                    // data from the jQuery ajax call
         infoWnd.setContent(newText);           // set the content
         infoWnd.open(map, marker, newText);    // 
        })
    }

Answer 1

如果你有一个jQuery Ajax调用（你需要自己填写）。这只是一个基本的（基本的）Ajax调用：

function fnGetNewTextForInfoWindow(infoWindow){
    var infoWnd = infoWindow
    $.ajax( "example.php" )
    .done(function(data) {
         var newText = data; //data from the jQuery ajax call
         infoWnd.setContent(newText);  //set the content
         infoWnd.open(map, marker, newText);
    })
}

要调用您的电话，请替换以下行：

    var newText = fnGetNewTextForInfoWindow();
    infoWnd.setContent(newText);

使用

    fnGetNewTextForInfoWindow(infoWnd);

这可以通过将对象infoWnd发送到fnGetNewTextForInfoWindow函数来实现。我们在同一范围内设置了Ajax调用，因此我们可以在infoWnd方法中重用done对象。

在谷歌地图示例中为ajax调用制作一个javascript闭包

1 个答案: