Cách tạo nhiều infowindow trong bản đồ google api

Tôi tạo 3 điểm đánh dấu trong bản đồ có dữ liệu đến từ một json. nhưng khi tôi nhấp vào một điểm đánh dấu và cố mở cửa sổ Thông tin chỉ có điểm đánh dấu cuối cùng sẽ phản hồi chính xác .. hãy giúp tôi .... mã này ....Cách tạo nhiều infowindow trong bản đồ google api

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script> 
</head> 
<body> 
    <script> 
     var json = [ 
      { 
       "title": "Stockholm", 
       "lat": 59.3, 
       "lng": 18.1, 
       "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)" 
      }, 
      { 
       "title": "Oslo", 
       "lat": 59.9, 
       "lng": 10.8, 
       "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)." 
      }, 
      { 
       "title": "Copenhagen", 
       "lat": 55.7, 
       "lng": 12.6, 
       "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)." 
      } 
     ] 
     var myCenter=new google.maps.LatLng(51.508742,-0.120850); 
     function initialize() 
     { 
      var mapProp = { 
       center:myCenter, 
       zoom:5, 
       mapTypeId:google.maps.MapTypeId.ROADMAP 
      }; 
      var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 
      for (var i = 0, length = json.length; i < length; i++) { 
       var data=json[i]; 
       var latLng = new google.maps.LatLng(data.lat, data.lng); 
       // Creating a marker and putting it on the map 
       var marker = new google.maps.Marker({ 
        position: latLng, 
        map: map, 
        title: data.title 
       }); 
      } 
       var infowindow = new google.maps.InfoWindow({ 
        content: data.description 
       }); 

      google.maps.event.addListener(marker, 'click', function() {  
       infowindow.open(map,marker); 
      }); 

     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    <div id="googleMap" style="width:100%;height:100%;"></div> 
</body> 

</html>

Nguồn

2013-05-17 Anonymous

Vấn đề là nếu bạn thử và gán nội dung cho infowindow trong vòng lặp. Sau đó, khi bạn nhấp vào điểm đánh dấu, nó chỉ biết về nội dung từ lần lặp cuối cùng của vòng lặp. Bạn cần đóng cửa thay thế. Có một vài cách khác nhau để xử lý này, dưới đây là cách tôi thường làm điều đó:

function initialize() { 
    var mapProp = { 
     center:myCenter, 
     zoom:5, 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

    var infowindow = new google.maps.InfoWindow({ 
     content: "" 
    }); 

    for (var i = 0, length = json.length; i < length; i++) { 
     var data=json[i]; 
     var latLng = new google.maps.LatLng(data.lat, data.lng); 
     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      map: map, 
      title: data.title 
     }); 

     bindInfoWindow(marker, map, infowindow, data.description); 
    } 
} 

function bindInfoWindow(marker, map, infowindow, description) { 
    marker.addListener('click', function() { 
     infowindow.setContent(description); 
     infowindow.open(map, this); 
    }); 
}

Nguồn

2013-05-17 10:05:28 duncan

thanx Duncan rất nhiều, làm việc tốt –

Bất kỳ ý tưởng của nó tại sao infowindow sẽ không bật lên ở tất cả trong ví dụ này? Các điểm đánh dấu tất cả xuất hiện trên bản đồ của tôi một cách chính xác nhưng dữ liệu được đặt trong 'infowindow.setContent (strDescription);' không được hiển thị khi tôi nhấp vào một điểm đánh dấu. – gjw80

@ gjw80 bạn có thể cần phải đặt câu hỏi của riêng mình, để chúng tôi có thể xem tất cả mã của bạn, để giúp chẩn đoán sự cố – duncan

Cách tạo nhiều infowindow trong bản đồ google api

Trả lời

Các vấn đề liên quan