0

私はこれを数時間理解しようとしてきましたが、運がありませんでした。うまくいけば、誰かが私に解決策を与えることができます。

ポリゴンをクリックしたときに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>

4

2 に答える 2

0

問題はそれだけではないかもしれませんが、間違いなく1つです。テキストcontent: contentStringはどこにもぶら下がっています。私はあなたがそれをこのように望んでいたと思います：

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

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

編集

2番目の問題は次のとおりinfowindowです。ループの反復ごとに上書きされることです。カレーする必要があります：

google.maps.event.addListener(polygons, 'click', (function(infowindow) {
        return function() {
            infowindow.open(map,polygons);
            content: contentString
        }
    })(infowindow)
);
于 2012-10-29T03:17:04.083 に答える
0

情報ウィンドウのコンテンツをポリゴンに関連付ける1つの方法は、関数クロージャを使用することです。また、マーカーで情報ウィンドウを使用していない場合に情報ウィンドウを表示する位置を設定する必要があります。許可されているアンカーは（少なくとも現在は）マーカーのみです。

1つの可能な「createClickablePoly」関数：

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

関数クロージャを使用した例

于 2012-10-29T06:23:12.120 に答える