1

我正在使用带有 gmaps4rails 的 rails 4，现在尝试在我的一个模型的“显示”视图上显示带有多边形的地图。我想我已经准备好了所有东西，因为在 javascript 中手动提供纬度和经度对于标记和多边形都很好。模型名称是“数据集”。它有四个坐标字段，表示数据集中包含的数据的地理边界框的坐标（：north_bounding_coordinate、east_...等）。我需要对其进行处理以将其转换为 4 个纬度经度值以显示多边形形状。在我的数据集模型中，我尝试构建一个哈希，我可以将其转换为 json 以在我的视图中传递到 javasript。但是，这似乎无法正常工作。

这是我的观点（数据集显示）：

.container
    %h3 Map
    %br
    .round-frame
      %div{style: "width: 800px;"}
        #map{style: "width: 800px; height: 400px;"}


  :javascript
   var handler = Gmaps.build('Google');
   handler.buildMap({ internal: {id: 'map'}}, function(){
     polygons = handler.addPolygons(=raw @bounding_box.to_json);
    handler.bounds.extendWith(polygons);
      handler.fitMapToBounds();
      handler.getMap().setZoom(12);
    });

这是我的控制器（数据集显示操作）：

def show
      @bounding_box = @dataset.get_coordinates
end

最后但并非最不重要的数据集模型部分：

def get_coordinates
                  north_east = Gmaps4rails.build_markers(self) do |dataset, marker|
                          marker.lat dataset.north_bounding_coordinate
                          marker.lng dataset.east_bounding_coordinate
                  end
                  south_east = Gmaps4rails.build_markers(self) do |dataset, marker|
                          marker.lat dataset.north_bounding_coordinate
                          marker.lng dataset.east_bounding_coordinate
                  end
                  north_west = Gmaps4rails.build_markers(self) do |dataset, marker|
                          marker.lat dataset.north_bounding_coordinate
                          marker.lng dataset.west_bounding_coordinate
                  end
                  south_west = Gmaps4rails.build_markers(self) do |dataset, marker|
                          marker.lat dataset.north_bounding_coordinate
                          marker.lng dataset.west_bounding_coordinate
                  end
                  north_east + south_east + north_west + south_west
          end

地图没有显示任何东西。如果我检查视图中的哈希，就像我将它放入 java 脚本中一样，它看起来像这样：

"[{\"lat\":29.285201,\"lng\":118.148346},{\"lat\":29.285201,\"lng\":118.148346},{\"lat\":29.285201,\"lng\":29.101777},{\"lat\":29.285201,\"lng\":29.101777}]"

也许它不起作用的原因是钥匙的奇怪转义？我怎样才能让它正常工作？欢迎任何建议或解决方案。

更新（边界框的新模型方法）：

def get_coordinates
                [{"lat" => self.north_bounding_coordinate, "lng" => self.west_bounding_coordinate},
               {"lat" => self.south_bounding_coordinate, "lng" => self.west_bounding_coordinate},
                 {"lat" => self.south_bounding_coordinate, "lng" => self.east_bounding_coordinate},
                {"lat" => self.north_bounding_coordinate, "lng" => self.east_bounding_coordinate}]
          end

但是，除了坐标现在是正确的之外，检查给出了相同的结果。当我像这样手动创建带有多边形的地图时，效果很好：

:javascript
   var handler = Gmaps.build('Google');
     handler.buildMap({ internal: {id: 'map'}}, function(){
     var polygons = handler.addPolygons(
       [
         [
           {lat:  29.29139, lng: 118.0372}, { lat: 29.13833, lng: 118.0372},
           {lat:  29.13833, lng:118.18776}, { lat: 29.29139, lng:118.18776},
         ]
       ],
        {
        "strokeColor": "#FF0000",
        }
     );
     handler.bounds.extendWith(polygons);
     handler.fitMapToBounds();
     handler.getMap().setZoom(8);
   });

当我在手动示例中转义字符串时，就像 as_json 自动完成的那样，地图不再显示。所以我怀疑这种转义是问题，但我不知道如何解决这个问题。

我找到了一个解决方案，但我不知道这是否是一个好的解决方案。而不是使用：

polygons = handler.addPolygons(=raw @bounding_box.to_json);

我现在用

polygons = handler.addPolygons(#{@bounding_box.to_json});

而且效果很好。它不再逃避字符串。

4

1 回答 1

0

解决方案是使用：

#{@bounding_box.to_json}

代替

=raw @bounding_box.to_json
于 2014-06-25T12:08:01.220 回答