試圖在同一時間顯示3個地圖

Question

我想顯示3個地圖同時，頁面加載，但不是地圖，他們是三個灰色的矩形。這是我如何創建並嘗試以顯示熱圖：

的Javascript

function search_around(){ 
     $.mobile.loading("show", { text: 'Retrieving information ...', textVisible: true }); 

     var dir = document.getElementById('address').value; 
     var radio = document.getElementById('radio').value; 
     if (radio>1000) { 
      radio = 1000; 
     } else if (radio==0) { 
      radio = 500 
     } 
     var geo = new google.maps.Geocoder(); 

     geo.geocode({'address':dir}, function(results, status){ 
      if (status=='OK'){ 
       var loc = results[0].geometry.location; 
       return $.getJSON('{{ url_for('search_around') }}', {'email':$.cookie('login_email'), 'lat': loc['lat'], 'lon':loc['lng'], 'radio':radio}).done(function(data){ 
        $.mobile.loading("hide"); 

        result = data['result']; 
        var centerlatlng = new google.maps.LatLng(loc['lat'],loc['lng']) 
        var myOptions = { 
         zoom: 13, 
         center: centerlatlng, 
         styles: [ 
         {elementType: 'geometry', stylers: [{color: '#242f3e'}]}, 
         {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]}, 
         {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}, 
         {featureType: 'administrative.locality',elementType:'labels.text.fill',stylers:[{color: '#d59563'}]}, 
         {featureType: 'poi', elementType: 'labels.text.fill',stylers: [{color: '#d59563'}]}, 
         {featureType: 'poi.park', elementType: 'geometry', stylers: [{color: '#263c3f'}]}, 
         {featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{color: '#6b9a76'}]}, 
         {featureType: 'road', elementType: 'geometry', stylers: [{color: '#38414e'}]}, 
         {featureType: 'road', elementType: 'geometry.stroke', stylers: [{color: '#212a37'}]}, 
         {featureType: 'road', elementType: 'labels.text.fill', stylers: [{color: '#9ca5b3'}]}, 
         {featureType: 'road.highway', elementType: 'geometry', stylers: [{color: '#746855'}]}, 
         {featureType: 'road.highway', elementType: 'geometry.stroke', stylers: [{color: '#1f2835'}]}, 
         {featureType: 'road.highway', elementType: 'labels.text.fill', stylers: [{color: '#f3d19c'}]}, 
         {featureType: 'transit', elementType: 'geometry', stylers: [{color: '#2f3948'}]}, 
         {featureType: 'transit.station', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}]}, 
         {featureType: 'water', elementType: 'geometry', stylers: [{color: '#17263c'}]}, 
         {featureType: 'water', elementType: 'labels.text.fill', stylers: [{color: '#515c6d'}]}, 
         {featureType: 'water', elementType: 'labels.text.stroke', stylers: [{color: '#17263c'}]} 
         ] 
        }; 

        var map_acc = new google.maps.Map(document.getElementById('map_search_acc'), myOptions); 
        var map_cons = new google.maps.Map(document.getElementById('map_search_cons'), myOptions); 
        var map_emis = new google.maps.Map(document.getElementById('map_search_emis'), myOptions); 

        var heatmap_points_acc = [] 
        var heatmap_points_cons = [] 
        var heatmap_points_emis = [] 

        acc_points = result['acc_latlon'].split('#') 
        $.each(acc_points,function(i, text){ 
         if (text.length > 3) { 
          lat_lon = text.split(','); 
          heatmap_points_acc.push(new google.maps.LatLng(lat_lon[0], lat_lon[1])) 
         } 
        }); 
        var pointArray_acc = new google.maps.MVCArray(heatmap_points_acc); 
        var heatmap_acc = new google.maps.visualization.HeatmapLayer({ 
         data: pointArray_acc 
        }); 
        heatmap_acc.set('threshold', 10); 
        heatmap_acc.set('radius', 10); 
        heatmap_acc.set('opacity', 0.8000); 
        heatmap_acc.set('dissipating', true); 
        heatmap_acc.setMap(map_acc); 

        $('#map_search_acc').css("height","500px"); 
        $('#map_search_acc').css("width","100%"); 
        $('#map_search_acc').redraw(); 

        cons_points = result['cons_latlon'].split('#') 
        $.each(cons_points,function(i, text){ 
         if (text.length > 3) { 
          lat_lon = text.split(','); 
          heatmap_points_cons.push(new google.maps.LatLng(lat_lon[0], lat_lon[1])) 
         } 
        }); 
        var pointArray_cons = new google.maps.MVCArray(heatmap_points_cons); 
        var heatmap_cons = new google.maps.visualization.HeatmapLayer({ 
         data: pointArray_cons 
        }); 
        heatmap_cons.set('threshold', 10); 
        heatmap_cons.set('radius', 10); 
        heatmap_cons.set('opacity', 0.8000); 
        heatmap_cons.set('dissipating', true); 
        heatmap_cons.setMap(map_cons); 

        $('#map_search_cons').css("height","500px"); 
        $('#map_search_cons').css("width","100%"); 
        $('#map_search_cons').redraw(); 

        emis_points = result['emis_latlon'].split('#') 
        $.each(emis_points,function(i, text){ 
         if (text.length > 3) { 
          lat_lon = text.split(','); 
          heatmap_points_emis.push(new google.maps.LatLng(lat_lon[0], lat_lon[1])) 
         } 
        }); 
        var pointArray_emis = new google.maps.MVCArray(heatmap_points_emis); 
        var heatmap_emis = new google.maps.visualization.HeatmapLayer({ 
         data: pointArray_emis 
        }); 
        heatmap_emis.set('threshold', 10); 
        heatmap_emis.set('radius', 10); 
        heatmap_emis.set('opacity', 0.8000); 
        heatmap_emis.set('dissipating', true); 
        heatmap_emis.setMap(map_emis); 

        $('#map_search_emis').css("height","500px"); 
        $('#map_search_emis').css("width","100%"); 
        $('#map_search_emis').redraw(); 

       }).fail(function(){ 
        show_message_error_connection(); 
       }); 
      } else { 
       alert('Address couldn\'t be found in google Geocoder service'); 
       $.mobile.loading("hide"); 
      } 
     }); 
    } 

的Html

<div data-role="page" id = "page_search" > 
     <div data-role="header" data-position="fixed"> 
      <h1><center><img href='#page_test' src="{{ url_for('static', filename='img/pxs_title.png')}}" style="height:25px;"></center></h1> 
      <a href="#panel_left" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-grid"></a> 
     </div> 
     <div id="panel"> 
      <center> 
      <label for="text-basic"> <font size="5">Address</font> </label> 
      <input id="address" type="textbox" size="40"> 
      <label for="text-basic" ><font size="5">Ratio (1000m - 500m):</font></label> 
      <input id="radio" type="textbox" size="20" value="500"> 
      <input id="search" type="button" value="SEARCH" onclick="javascript:search_around();"> 
      </center> 
     </div> 
     <ul data-role="listview" data-icon="false" id = "list-search-maps"> 
      <li data-role="list-divider"><b>Map Accelerations</b></li> 
      <div id="map_search_acc" style="width:750; height:700"></div> 
      <li data-role="list-divider"><b>Map Consumption</b></li> 
      <div id="map_search_cons" style="width:750; height:700"> </div> 
      <li data-role="list-divider"><b>Map Emissions</b></li> 
      <div id="map_search_emis" style="width:750; height:700"></div> 
     </ul> 
    </div> 

我用這個同樣的過程創建1個熱圖和它的工作原理，同樣的過程，現在不是什麼？我已經檢查過我在後端收到查詢，並且前端正在接收數據，但它未在地圖中顯示。我很新的HTML + JavaScript，所以我現在迷路了，我不知道該怎麼辦

Answer 1

像往常一樣，當你100％確定這是不是問題，只要看看它... ...這是我做的，問題是：

var centerlatlng = new google.maps.LatLng(loc['lat'],loc['lng']) 

我不知道爲什麼這兩個值正確發送到後臺，但他們讀創建centerlatlng爲「功能（） {return a}「和」function（）{return b}「，所以地圖的中心點是（Null，Null），這就是地圖（現在的地圖）沒有顯示的原因。它已經採取了很多的時間（我已經學到了很多在這個過程中），但我能找到答案，我送從後端的緯度和經度座標和問題就迎刃而解了回來：

var centerlatlng = new google.maps.LatLng(data['lat'],data['lon']);