Question

我想在用户点击标记时检索并显示更新的infoWindow内容。我遇到的问题是如何在相关的点击事件上插入新文本。 enter image description here

以下是相关代码。

// 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();

    // this is clearly wrong  
    infoWnd.setContent(newText);

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

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

和完整的简化示例......

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">

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

/* fix for unwanted scroll bar in InfoWindow */
.scrollFix {
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
}

</style>
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>           
<script src="../jquery/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 - lots of options available here 
        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');
        return newText;
    }

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


</script>
<a href="../index.php">BACK</a><br> 
<br/>

<h3></h3>
<ul>
    <li>Enter some text in text box and click market to update text in InfoWindow, then show InfoWindow</li>        
</ul>

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>

Answer 1

Google maps setContent（）函数可以做到这一点。例如：

google.maps.event.addListener(marker, 'click', function() {

    //Close active window if exists
    if(activeInfoWindow) {
        activeInfoWindow.close();
    } else {        
        activeInfoWindow = new google.maps.InfoWindow();
    }

    // get latest text
    var newText = fnGetNewTextForInfoWindow();

    // Update InfoWindow content
    activeInfoWindow.setContent(newText);

    // Open InfoWindow
    activeInfoWindow.open(map, marker);
});

您可以根据需要随时重复使用infoWindow。只需更改内容并将其放在正确的标记处即可。

Answer 2

完成工作答案......

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">

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

/* fix for unwanted scroll bar in InfoWindow */
.scrollFix {
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
}

</style>
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>           
<script src="../jquery/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 ;      

    // arrays to hold copies of the markers and html used by the side_bar         
    var gmarkers = [];


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

        // map options - lots of options available here 
        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");          


        //console.log(gmarkers);
      }

    // ------------------------------------------------------------------------------- //
    // 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); 

        // save the info we need to use later 
        gmarkers.push(marker);

        // 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 previous active window if exists - [one might expect this to be default behaviour no?]               
        if(activeInfoWindow != null) activeInfoWindow.close();

        //Close previous active window if exists
        // if(activeInfoWindow) {
            // activeInfoWindow.close();
        // } else {        
            // activeInfoWindow = new google.maps.InfoWindow();
        // }

        // get latest text
        var newText = fnGetNewTextForInfoWindow();

        // Update InfoWindow content
        infoWnd.setContent(newText);

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

        // 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>
<a href="../index.php">BACK</a><br> 
<br/>

<h3>Update InfoWindow contents when marker is clicked</h3>
<p>This is useful when content of infoWindow changes frequently</p>

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

<br/>
<br/>

</body>
</html>

谷歌地图 - 如何更改谷歌地图infoWindow文本

2 个答案: