Google Maps API v3：未定義數據層ID

Question

長期潛伏，這里的第一次海報，所以要溫柔......

我正在構建一個地圖，該地圖使用通過PHP從MYSQL數據庫解析的數據來設置geoJson文件定義的多邊形的顏色（它在Google開發站點上使用此示例作為模板）。 我遇到的問題是，當頁面加載時，數據層不會自動初始化。

完整的javascript / HTML發布在下面，但我在初始化數據層時所使用的示例中使用的代碼部分是：

  google.maps.event.addListenerOnce(map.data, 'addfeature', function() {
  google.maps.event.trigger(document.getElementById('price_select'),
        'change');
  });

這給了我錯誤“Uncaught TypeError：無法讀取未定義的屬性'setProperty'”。 如果我注釋掉監聽器，數據層將加載正常，但只有在我從下拉列表中手動選擇了一個新輸入后（id ='price_select'）。

我正在加載的geoJson文件相對較大（~14mb）所以我認為發生的事情是在整個文件加載之前監聽器正在觸發（'addfeature'只等待添加的第一個特性，但我有> 2000）因此PHP解析的區域還沒有相應的功能ID，它由loadGeoJson調用中的idPropertyName: 'Name'參數設置。 我不知道只有在整個GeoJson文件加載后才設置偵聽器的方法。 或者，我可能完全錯誤地認為這是錯誤的原因。

無論如何，下面的完整代碼 - 我知道它有一些怪癖（例如我傳遞loadData函數一個參數，但不使用它），但這些主要是因為我計划稍后添加更多功能。 謝謝你的支持！

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
        <script>

        var map;

        var priceMin = 1000000;
        var priceMax = 0;

        google.maps.event.addDomListener(window, 'load', function(){

            map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: new google.maps.LatLng(53.587425,-1.663539),
             zoom: 7,
            }); 

        // add styles
        map.data.setStyle(styleFeature);
        map.data.addListener('mouseover', mouseInToRegion);
        map.data.addListener('mouseout', mouseOutOfRegion);


      // initiate drop down functionality
      var selectBox = document.getElementById('price_select');
      google.maps.event.addDomListener(selectBox, 'change', function() {
        clearData();
        loadData(selectBox.options[selectBox.selectedIndex].value);
      });


      // load polygons
      loadMapShapes();

    });     

    function loadMapShapes(){

     map.data.loadGeoJson('http://localhost/OS_raw.json',
        { idPropertyName: 'Name' }); 

  //This is the listener that is supposed to initiate the data layer

      google.maps.event.addListenerOnce(map.data, 'addfeature', function() {
      google.maps.event.trigger(document.getElementById('price_select'),
            'change');
      });

 // End listener   


    }

    function loadData(variable){

        var phpdistricts = (<?php echo $phpdistricts; ?>);
        var phpprices = (<?php echo $phpprices; ?>);



        for(var i=0; i<phpdistricts.length; i++){

            var district = phpdistricts[i];
            var price = parseInt(phpprices[i]);

            // keep track of min and max values
            if (price < priceMin) {
            priceMin = price;
            }
            if (price > priceMax) {
            priceMax = price;
            }


            console.log(map.data.getFeatureById(district));

   //This is where the error triggers - feature is undefined according to console log above
            map.data
            .getFeatureById(district)
            .setProperty('price', price);}

   //end of problematic section        

            // update and display the legend
            document.getElementById('census-min').textContent =
                priceMin.toLocaleString();
            document.getElementById('census-max').textContent =
                priceMax.toLocaleString();    

    }

    function clearData() {
      priceMin = 1000000;
      priceMax = 0;
      map.data.forEach(function(row) {
        row.setProperty('price', undefined);
      });
      document.getElementById('data-box').style.display = 'none';
      document.getElementById('data-caret').style.display = 'none';
    }

    function styleFeature(feature) {
      var low =  [151, 83, 34]; // color of smallest datum
      var high = [5, 69, 54];   // color of largest datum

      // delta represents where the value sits between the min and max
      var delta = (feature.getProperty('price') - priceMin) /
          (priceMax - priceMin);

      var color = [];
      for (var i = 0; i < 3; i++) {
        // calculate an integer color based on the delta
        color[i] = (high[i] - low[i]) * delta + low[i];
      }

      // filters out areas without data
      var showRow = true;
      if (feature.getProperty('price') == null ||
          isNaN(feature.getProperty('price'))) {
        showRow = false;
      }

      var outlineWeight = 0.5, zIndex = 1;
      if (feature.getProperty('state') === 'hover') {
        outlineWeight = zIndex = 2;
      }

      return {
        strokeWeight: outlineWeight,
        strokeColor: '#fff',
        zIndex: zIndex,
        fillColor: 'hsl(' + color[0] + ',' + color[1] + '%,' + color[2] + '%)',
        fillOpacity: 0.75,
        visible: showRow
      };
    }

    function mouseInToRegion(e) {
      // set the hover state so the setStyle function can change the border
      e.feature.setProperty('state', 'hover');

      var percent = (e.feature.getProperty('price') - priceMin) /
          (priceMax - priceMin) * 100;

      // update the label
      document.getElementById('data-label').textContent =
          e.feature.getProperty('Name');
      document.getElementById('data-value').textContent =
          e.feature.getProperty('price');
      document.getElementById('data-box').style.display = 'block';
      document.getElementById('data-caret').style.display = 'block';
      document.getElementById('data-caret').style.paddingLeft = percent + '%';
    }

    function mouseOutOfRegion(e) {
      // reset the hover state, returning the border to normal
      e.feature.setProperty('state', 'normal');
    }


        </script>
      </head>
      <body>
        <div id="controls" class="nicebox">
            <div>
            <select id="price_select">
                <option value="price">Jun '14</option>
                <option value="price">Jun '14</option>
            </select>
            </div>

            <div id="legend">
            <div id="census-min">min</div>
            <div class="color-key">
                <span id="data-caret">◆</span>              
            </div>
            <div id="census-max">max</div>          
            </div>
            </div>
        <div id="data-box" class="nicebox">
            <label id="data-label" for="data-value">Area: </label>
            <span id="data-value"></span>
        </div>
        <div id="map-canvas"></div>
      </body>
    </html>   

Answer 1

我沒有完全明白你在這里問的問題，但你是否嘗試過使用數據層事件而不是地圖？

map.data.setStyle(
 function(feature){
   // Build your styles here based on feature properties.

    return style_i_want_for_this_feature;
 }
);

這將針對GeoJSON數據中的每個功能進行調用，您可以對其進行適當處理。 我以這種方式加載和設置具有數千個功能的功能集合。