多个数据。加载geoJSON后,标记消失。 DataLayer只有1层?

时间:2015-05-25 13:10:44

标签: google-maps

今天尝试将几个geoJSON数据加载到map.data中,但出于某种原因,某些点已从地图中删除:http://screencast.com/t/6Aw5Jijcwq

谷歌地图api只使用1层,如果这些点与另一个形状重叠,它会被删除吗?

以下是我使用的代码:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>    
        var map;
        var boundsString;
        var jqXHR = null;
        var layers = new Array();

        /*function callback(resultGeoJson) {
            map.data.addGeoJson(resultGeoJson); 
        }*/

        function initialize() {
          // Create a simple map.
          map = new google.maps.Map(document.getElementById('map-canvas'), {
            zoom: 12,
            center: { lat: 58.0257285679743, lng: -122.88298941015626 }
          });

          // Adding needed layers on the map
          layers.push({ tableName: 'nts_grid_blocks', minZoom: 10, maxZoom: 100, dataStyle: { fillColor: 'green', strokeWeight: 1 }});
          layers.push({ tableName: 'facilities', minZoom: 10, maxZoom: 100, dataStyle: { fillColor: 'green' } });

          google.maps.event.addListener(map, 'idle', function(){
              // Populating bounds of the map to pull need geometry objects from the server
              var bounds = map.getBounds();
              var latRightTop = bounds.getNorthEast().lat();   
              var longRightTop = bounds.getNorthEast().lng();
              var latLeftBottom = bounds.getSouthWest().lat();   
              var longLeftBottom = bounds.getSouthWest().lng();

              boundsString = 'POLYGON ((' + 
                longRightTop + ' ' + latRightTop + ', ' + // Right top
                longLeftBottom + ' ' + latRightTop + ', ' + // Right bottom
                longLeftBottom + ' ' + latLeftBottom + ', ' + // Left bottom
                longRightTop + ' ' + latLeftBottom + ', ' + // Left top
                longRightTop + ' ' + latRightTop + // Right top
                '))';

              if (jqXHR != null) {
                jqXHR.abort();
              }

              // Remove previously added features
              map.data.forEach(function (feature) {
                map.data.remove(feature);
              });

              // Fill layers on the map
              for (var layerIndex = 0; layerIndex < layers.length; layerIndex++) {
                var layer = layers[layerIndex];

                console.log(boundsString);  

                var currentZoom = map.getZoom();
                console.log('current zoom: ' + currentZoom);

                if (currentZoom >= layer.minZoom && currentZoom <= layer.maxZoom) {
                    jqXHR = $.ajax(
                    {
                        contentType: "application/json",
                        dataType: 'jsonp',
                        crossDomain: true,
                        jsonpCallback: 'callback',
                        url: 'https://jacscantelematics.appspot.com/tables/shapesdb:' + layer.tableName + '/features?intersects=' + boundsString,
                        success: function (response) {
                            jqXHR = null;

                            map.data.setStyle(layer.dataStyle);

                            map.data.addGeoJson(response);  // THIS PLACE DOESN'T WORK. IT OVERRIDES PREVIOUSLY ADDED RESULTS FROM "facilities" layer (since it executes faster)        
                        },
                        type: 'GET'
                    });
                }
              }
          });  
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas" style="width: 1000px; height: 1000px;"></div>
  </body>
</html>

也许我们不能两次使用map.data.addGeoJson?

0 个答案:

没有答案