infowindow無法正常工作

我一直試圖弄清楚這幾個小時，但沒有運氣。希望somone能給我一個解決方案。infowindow無法正常工作

我有幾個多邊形，我想單擊它們時顯示它們從siteName的值。我沒有收到錯誤信息，但我也沒有收到要顯示的信息窗口。

非常感謝您的幫助。

<!DOCTYPE html> 
<html> 
<head> 
<p id="demo">coordinates</p> 
</br> 
<p id="coords">coordinates</p> 
<style> 
    html, body, #map_canvas { margin: 0; padding: 0; height: 100%; } 
</style> 
<script 
    src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization,MVCObject"> 
</script> 
<script> 
    var map; 

    function initialize() { 
     var kansas_city = new google.maps.LatLng(39.00495613,-94.64780668); 
     var mapOptions = { 
     zoom: 10, 
     center: kansas_city, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
     }; 

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

    // Create a <script> tag and set the geoJSON file as the source. 
    var script = document.createElement('script'); 
    // (In this example we use a locally stored copy instead.) 
    script.src = 'sector.json'; 
    document.getElementsByTagName('head')[0].appendChild(script); 
    } 

    // Loop through the results array and place a marker for each 
    // set of coordinates. 
    var siteNames; 
    window.sector_callback = function(results) { 
     for (var i = 0, len = results.features.length; i < len; i++) { 
      var coords = results.features[i].geometry.coordinates[0]; 
      siteNames = results.features[i].properties.Name; // added for site names 
      var path = []; 

      for (var j = 0, len2 = coords.length; j < len2; j++){ // pull out each set of coords and create a map object 
       path.push(new google.maps.LatLng(coords[j][1], coords[j][0])); 
      } 

      var polygons = new google.maps.Polygon({ 
      path: path, 
      map: map 
      }); 

      var contentString = siteNames; 
      var infowindow = new google.maps.InfoWindow({ 

      });      


      google.maps.event.addListener(polygons, 'click', function() { 
       infowindow.open(map,polygons); 
       content: contentString 
      }); 




      google.maps.event.addListener(polygons, 'mouseover', function() { 
      var currentPolygon = this; 

      currentPolygon.setOptions({ // setOptions is a method and properties below 
       fillOpacity: 0.45, 
       fillColor: "#FF0000", 

       }) 
      }); 

      google.maps.event.addListener(polygons, 'mouseout', function() { 
      var currentPolygon = this; 
      currentPolygon.setOptions({ 
       fillOpacity: 0.35, 
       fillColor: "#000000" 
       }) 
      });    
     } 
    } 
</script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas"></div> 
</body>

來源

2012-10-29 rf guy

可能不是唯一的問題，但它肯定是一個。文字content: contentString正懸掛在不知何處;我想你想它是這樣的：

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

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

編輯

這裏的第二個問題：infowindow被覆蓋掉了循環的每個迭代。它需要令行禁止：

google.maps.event.addListener(polygons, 'click', (function(infowindow) { 
     return function() { 
      infowindow.open(map,polygons); 
      content: contentString 
     } 
    })(infowindow) 
);

來源

2012-10-29 03:17:04 McGarnagle

一到信息窗口的內容與多邊形關聯的方法是使用function closure。您還需要設置infowindow將顯示的位置（如果您沒有使用標記），唯一允許的錨點（至少當前）是標記。

一個可能的「createClickablePoly」功能：

function createClickablePoly(poly, html) { 
     google.maps.event.addListener(poly, 'click', function(evt) { 
      infowindow.setContent(html); 
      infowindow.setPosition(evt.latLng); 
      infowindow.open(map); 
     }); 
}

Example using function closure

來源

2012-10-29 06:23:12 geocodezip

infowindow無法正常工作

回答

相關問題