Question

我正在尝试通过jquery ajax调用加载谷歌图表，方法是点击地图上加载的geojson图层。我使用传单API进行地图创建及其图层，使用谷歌图表API创建图表。当我尝试加载页面时，它无法完成加载，它会给我以下错误：未捕获错误：找不到地图容器。

当我在控制台中单击错误时，它会将我带到传单库，其中此部分被标记为错误：＆＃34; .get（t）; if（！e）抛出新错误（＆＃ 34;未找到地图容器。＆＃34;）; if（e._leaflet）抛出新错误（＆＃34;地图容器已初始化。＆＃34;）; e._leaflet =！0}，_ initLayout：function （）{var t = this._container; o.DomUtil.addClass（t，＆＃34; leaflet-container＆＃34; +（o.Browser.touch？＆＃34; leaflet-t ...＆＃34;

当我评论图表的代码时，页面会加载地图而不会出现问题。

我将这些js库用于图表和地图：

<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

我的图表代码，geojson和地图如下：

function drawChart() {                                    

     var jsonData = $.ajax({
            url: "http://climatedataapi.worldbank.org/climateweb/rest/v1/country/cru/tas/year/" + feature.properties.ISO3.jsonp,
            data: {page: 1, format: "jsonp", prefix: "getdata"},
            crossDomain: true,
            jsonpCallback: "getdata",
        }).done(function (results) {
            var data = new google.visualization.DataTable();
            data.addColumn('datetime', 'Year');
            data.addColumn('number', 'Temp');
            $.each(results, function (i, row) {
                data.addRow([
                    (new Date(row.year)),
                    parseFloat(row.data),
                ]);
            });
            var chart = new google.visualization.LineChart(document.getElementById("container"));                                
            chart.draw(data, {
                    title: 'Annual Average Temperature'
                });                       
            })//end function
}//end drawChart                          

google.load('visualization', '1', {
       packages: ['corechart']
});  

var aLayerThree = L.geoJson(aGeoJson, {
        style: function (feature) {
            return {stroke: true, color: "#3333ff", weight: 2, fillOpacity: 0};
        },
        onEachFeature: function (feature, layer) {

                layer.on('mouseover', function() {
                        layer.setStyle({fillColor: "#4da6ff", fillOpacity: 0.4});
                        aDiv.innerHTML = feature.properties.NAME;

                layer.on('mouseout', function() {
                        layer.setStyle({ fillOpacity: 0});
                        aDiv.innerHTML = "Web-Mapping Techniques";

                $('layer').on('click', function() {       
                         drawChart();

                 })// end click
                })// end mouseout
                })//end mousover
        } // end onEachFeature
});// end GeoJson            

//Create our Map Object
map = L.map('myMap', {
                fullscreenControl: true,
            center: centerlatlng,
            minZoom: 2,
            zoom:   4,
            layers: [aLayerOne, aLayerThree]
});

我的HTML看起来像这样：

<body>
<div class="container-fluid">       
    <div class="row">
        <!--<br />-->
    </div><!-- Row 1 -->        
    <div class="row">
        <nav class="col-lg-10 col-lg-offset-1 navbar navbar-default" role="navigation">            
            <a class="navbar-brand" href="#">Annual Temperature and Precipitation by Country</a>
            <ul class="nav navbar-nav pull-right">
                <li class="active"><a href="#" id="anInfo">Info</a></li>
                <li><a href="#" id="anAbout">About</a></li>
            </ul>                           
        </nav>
    </div><!-- Row 2 -->        
    <div class="row">           
        <div id="myMap" class="col-lg-10 col-lg-offset-1"></div>
    </div><!-- Row 3 -->        
    <div class="row">
        <br/>
    </div><!-- Row 4 -->        
    <div class="row">
        <div id="container" style="width:100%; height:400px;"></div>            
    </div><!-- Row 5 -->
</div>

我是创建图表的新手。我究竟做错了什么？提前谢谢！

尝试通过点击事件加载谷歌图表 - 得到错误：未捕获错误：未找到地图容器

0 个答案: