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>