NgMap指令顯示融合表刪除一些數據

Question

因此，我最近切換到使用一個名爲ngMap的開源指令，它負責爲我生成Google Maps的許多工作。

我之前在關於頁面上顯示了一個Google地圖，當我改變了所有內容以使用Angular視圖時，這一切都打破了。所以我把所有東西都拿回來，現在它具有我想要的視覺方面。雖然事情不像他們簡單地使用基本的Google API那樣工作。

在詢問之前，我知道在新示例中，我的地圖上有一個樣式選項。如果你在指令中刪除它，它只顯示PA。

例如： 舊地圖

<script> 
    function Init() { 

     console.log("I loaded."); 

     google.maps.visualRefresh = true; 
     var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) || 
      (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/)); 
     if (isMobile) { 
      var viewport = document.querySelector("meta[name=viewport]"); 
      viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no'); 
     } 
     var mapDiv = document.getElementById('googft-mapCanvas'); 

     var map = new google.maps.Map(mapDiv, { 
      center: new google.maps.LatLng(40.878100, -77.799600), 
      zoom: 7, 
      draggable: !("ontouchend" in document) 
     }); 
     map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open')); 
     map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend')); 

     layer = new google.maps.FusionTablesLayer({ 
      map: map, 
      heatmap: { enabled: false }, 
      query: { 
       select: "col4", 
       from: "1kDOtIvEE7OkCmPb_vPXluY0ZOjBD4lvyMICDSRMl", 
       where: "" 
      }, 
      options: { 
       styleId: 6, 
       templateId: 137 
      } 
     }); 

     google.maps.event.addDomListener(window, 'resize', function() { 
      map.setCenter(center); 
     }); 

     var center; 
     function calculateCenter() { 
      center = new google.maps.LatLng(40.878100, -77.799600); 
     } 
     google.maps.event.addDomListener(map, 'idle', function() { 
      calculateCenter(); 
     }); 


     if (isMobile) { 
      var legend = document.getElementById('googft-legend'); 
      var legendOpenButton = document.getElementById('googft-legend-open'); 
      var legendCloseButton = document.getElementById('googft-legend-close'); 
      legend.style.display = 'none'; 
      legendOpenButton.style.display = 'block'; 
      legendCloseButton.style.display = 'block'; 
      legendOpenButton.onclick = function() { 
       legend.style.display = 'block'; 
       legendOpenButton.style.display = 'none'; 
      } 
      legendCloseButton.onclick = function() { 
       legend.style.display = 'none'; 
       legendOpenButton.style.display = 'block'; 
      } 
     } 
    } 
</script> 

有了這樣的輸出： Link to see desired output

新地圖：

<ng-map zoom="6" center="40.878100, -77.799600"> 
         <fusion-tables-layer query="{ 
    select: 'geometry', 
    from: '1kDOtIvEE7OkCmPb_vPXluY0ZOjBD4lvyMICDSRMl'}" , 
              styles="[{ 
              polygonOptions { 
              fillColor '#00FF00' , 
              fillOpacity 0.3 
              }]"> 
         </fusion-tables-layer> 
        </ng-map> 

與不希望的輸出： Image of undesired output

Answer 1

是沒有得到應用

指定的樣式，因爲在styles屬性錯字，有效值爲：

styles="[{ 
      polygonOptions: { 
       fillColor: '#00FF00' , 
       fillOpacity: 0.3 
     } 
}]" 

例

angular.module('map-app', ['ngMap']) 
 
    .controller('map-controller', ['NgMap', 
 
     function (NgMap) { 
 
      
 
     }]);

<script src="https://code.angularjs.org/1.4.8/angular.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 

 
<div ng-app="map-app" ng-controller="map-controller"> 
 
    <ng-map center="40.878100, -77.799600" zoom="6"> 
 

 
    <fusion-tables-layer query="{select: 'geometry', 
 
    from: '1kDOtIvEE7OkCmPb_vPXluY0ZOjBD4lvyMICDSRMl'}" , styles="[{ 
 
               polygonOptions: { 
 
                fillColor: '#00FF00' , 
 
                fillOpacity: 0.3 
 
               } 
 
              }]"> 
 
    </fusion-tables-layer> 
 

 
    </ng-map> 
 
</div>