Question

我正在尝试使用我的数据进行Google Maps API高级可视化示例。但是，地图和图表都没有显示。 Chrome上的调试程序将错误列为： “未捕获的TypeError：无法将属性”offsetWidth“读为null。

我在Stack以及旧的google群组中都阅读了针对该特定错误的回复，但这些建议都不适合我。

我希望有人可以查看代码，让我知道我错过了什么。我很确定这是一个非常小的东西，但我已经撞墙了，所以希望能有另一双眼睛。

请注意，这是示例代码的确切版本 - 稍微调整一下我的数据集，以便能够检查出来。

提前致谢。代码如下。

-Madhavi

  <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', { packages: ['corechart'] });

      /** * Sector type mapped to a style rule. * @type {Object} * @const */ var LAYER_STYLES = { 'Operational': { 'min': 0, 'max': 10000, 'colors': [ '#f4cccc', '#ea9999', '#e06666', '#cc0000',
       '#990000' ] }, 'Formally Approved': { 'min': 0, 'max': 10000, 'colors': [ '#d0e0e3', '#a2c4c9', '#76a5af', '#45818e', '#134f5c' ] }, 'In-Principle Approved': { 'min': 0, 'max': 20000, 'colors': [
       '#d9d2e9', '#b4a7d6', '#8e7cc3', '#674ea7', '#351c75' ] } }

function initialize() {

  var sector = 'Operational';

  var india = new google.maps.LatLng(21.7679,78.8718); var options = {}; options['dataMode'] = 'markers';

  map = new google.maps.Map(document.getElementById('map_canvas'), { center: india, zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL },
    });

  var layer = new google.maps.FusionTablesLayer(); updateLayerQuery(layer, sector); layer.setMap(map);

  createLegend(map,sector); styleLayerBySector(layer,sector); styleMap(map); drawVisualization('Andhra Pradesh');

  google.maps.event.addListener(layer,'click',function(e) { var state = e.row['State'].value; drawVisualization(state);

  var area = e.row['Area in Acres'].value; if (area > 5000) { e.infoWindowHtml = '<p class="high">High SEZ area!</p>'; } else if (area > 2500) { e.infoWindowHtml = '<p class="high">Medium SEZ area!</p>
  '; } else { e.infoWindowHtml = '<p class="high">Low SEZ area!</p>'; }

 });

 google.maps.event.addDomListener(document.getElementById('sector'), 'change',function() { sector = this.value; updateLayerQuery(layer,sector); styleLayerBySector(layer,sector); updateLegend(sector);
    });

  google.maps.event.addDomListener(document.getElementById('state'), 'change',function() { var state = this.value; updateLayerQuery(layer,sector,state); drawVisualization(state); }); };

function updateLayerQuery(layer,sector,state) { var where = "SEZ Type= '"+ sector + "'"; if (state) { where += "AND State = '" + state + "'"; } layer.setOptions({ query: { select : 'geometry', from:
    '4070871', where: where } }); }

function createLegend(map, sector) { var legendWrapper = document.createElement('div'); legendWrapper.id = 'legendWrapper'; legendWrapper.index = 1;
        map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push( legendWrapper); legendContent(legendWrapper, sector); }

function legendContent(legendWrapper, sector) { var legend = document.createElement('div'); legend.id = 'legend';

        var title = document.createElement('p'); title.innerHTML = sector + ' SEZs by State in India'; legend.appendChild(title);

        var layerStyle = LAYER_STYLES[sector]; var colors = layerStyle.colors; var minNum = layerStyle.min; var maxNum = layerStyle.max; var step = (maxNum - minNum) / colors.length; for (var i = 0; i <
        colors.length; i++) { var legendItem = document.createElement('div');

          var color = document.createElement('div'); color.setAttribute('class', 'color'); color.style.backgroundColor = colors[i]; legendItem.appendChild(color);

          var newMin = minNum + step * i; var newMax = newMin + step; var minMax = document.createElement('span'); minMax.innerHTML = newMin + ' - ' + newMax; legendItem.appendChild(minMax);

          legend.appendChild(legendItem); }

        legendWrapper.appendChild(legend); }

   function updateLegend(sector) { var legendWrapper = document.getElementById('legendWrapper'); var legend = document.getElementById('legend'); legendWrapper.removeChild(legend); legendContent(
          legendWrapper, sector); }

    function styleLayerBySector(layer, sector) { var layerStyle = LAYER_STYLES[sector]; var colors = layerStyle.colors; var minNum = layerStyle.min; var maxNum = layerStyle.max; var step = (maxNum -
            minNum) / colors.length;

            var styles = new Array(); for (var i = 0; i < colors.length; i++) { var newMin = minNum + step * i; styles.push({ where: generateWhere(newMin, sector), polygonOptions: { fillColor:
            colors[i], fillOpacity: 1 } }); } layer.set('styles', styles); }

function generateWhere(minNum, sector) { var whereClause = new Array(); whereClause.push("Sector = '"); whereClause.push(sector); whereClause.push("' AND 'Area in Acres' >= "); whereClause.push(minNum);
        return whereClause.join(''); }

 function styleMap(map) { var style = [{ featureType: 'all', stylers: [{ saturation: -99 }] }, { featureType: 'poi', stylers: [{ visibility: 'off' }] }, { featureType: 'road', stylers: [{ visibility:
        'off' }] }];

        var styledMapType = new google.maps.StyledMapType(style, { map: map, name: 'Styled Map' }); map.mapTypes.set('map-style', styledMapType); map.setMapTypeId('map-style'); }

function drawVisualization(state) { google.visualization.drawChart({ containerId: "visualization", dataSourceUrl: "http://www.google.com/fusiontables/gvizdata?tq=", query: "SELECT 'SEZ Type' as Sector,
        'Area in Acres' as Area " + "FROM 4070871 WHERE State = '" + state + "'", chartType: "ColumnChart", options: { title: state, height: 400, width: 400 } }); }

google.maps.event.addDomListener(window, 'load', initialize()); </script> </head> <body >

     <div id="map-canvas" style="width: 500px;height: 500px">Loading..</div> <div id="visualization"></div> <form> <label>SEZ Type </label> <select id="sector"> <option value="Operational">Operational
     </option> <option value="Formally Approved">Formally Approved</option> <option value="In-Principle Approved">In-Principle Approved</option> </select>

 <label>State</label> <select id="state"> <option value="Andhra Pradesh">Andhra Pradesh</option> <option value="Chandigarh">Chandigarh</option> <option value="Chattisgarh">Chattisgarh</option> <option
  value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option> <option value="Delhi">Delhi</option>

  </select> </form> </body> </html>

Answer 1

确保指定包含地图的div的大小。

进一步确保您的地图变量在全局范围内定义，并确保在加载dom时初始化地图，即在身体负载上

Google Maps API - FusionTables图层示例 - 未显示地图

-Madhavi

1 个答案: