Рисуем полигон с помощью gmaps4rails
Я использую rails 4 с gmaps4rails и сейчас пытаюсь отобразить карту с многоугольником в представлении "показать" одной из моих моделей. Я думаю, что у меня есть почти все на месте, так как ручное предоставление широты и долготы в 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});
И это работает хорошо. Это больше не ускользает от струн.
1 ответ
Решение заключается в использовании:
#{@bounding_box.to_json}
Вместо
=raw @bounding_box.to_json