javascript - 谷歌地图 - 如何更改谷歌地图信息窗口文本-6ren

javascript - 谷歌地图 - 如何更改谷歌地图信息窗口文本

转载作者：行者123 更新时间：2023-12-03 10:38:14

我想在用户单击标记时检索并显示更新的 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>

最佳答案

Google map 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。只需更改内容并将其放置在正确的标记处即可。

关于javascript - 谷歌地图 - 如何更改谷歌地图信息窗口文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28902701/