[英]Using ruby array inside JS.erb to plot locations on a map
I'm new to coding. 我是编码新手。 I'm trying to use JS to plot points on a map, using google's API. 我正在尝试使用JS使用JS在Google的API上在地图上绘制点。 I can get it to use values if I input them manually, but I need to be able to add them via Ruby. 如果手动输入值,我可以使用它,但是我需要能够通过Ruby添加它们。
Here's the code that works: 这是有效的代码:
function initMap() {
var mapv2 = new google.maps.Map(document.getElementById('mapv2'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
var markerCluster = new MarkerClusterer(mapv2, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: -31.563910, lng: 147.154312},
{lat: -33.718234, lng: 150.363181},
{lat: -33.727111, lng: 150.371124},
{lat: -33.848588, lng: 151.209834},
{lat: -33.851702, lng: 151.216968},
{lat: -34.671264, lng: 150.863657},
{lat: -35.304724, lng: 148.662905},
];
The bit that I'm trying to change is locations. 我要更改的是位置。 Here's what I've come up with but it's not working: 这是我想出的方法,但是没有用:
Update 更新资料
function initMap() {
var mapv2 = new google.maps.Map(document.getElementById('mapv2'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markers = locations.each(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
var markerCluster = new MarkerClusterer(mapv2, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = '<%= @array %>';
@latitude and longitude return an array of co-ordinates, in rails. @latitude和经度以rails返回一组坐标。 Hopefully that makes sense. 希望这是有道理的。 If you need anything else, please let me know! 如果您还有其他需要,请告诉我! Any pointing in the right direction, or constructive criticism is greatly appreciated! 任何指向正确方向的建议或建设性的批评都将受到赞赏!
Edit: So in my controller I have: 编辑:因此,在我的控制器中,我有:
def index
@places = Place.all
@longitude = @places.pluck(:longitude)
@latitude = @places.pluck(:latitude)
end
@latitude and longitude return an array of co-ordinates @latitude和经度返回一个坐标数组
Well in that case it not gonna work, since you need array of hashes with lat
and lng
as keys. 那么在那种情况下它就行不通了,因为您需要用lat
和lng
作为键的哈希数组 。
You should extract the latitude and longitude for each location , construct a hash with lat
, lng
keys and push those to an array. 您应该提取每个位置的纬度和经度 ,使用lat
, lng
键构造哈希并将其推入数组。
Since there isn't much information provided, I'm going to assume and provide a sample example 由于没有提供太多信息,因此我将假设并提供一个示例示例
Example: 例:
@locations = #location objects with lat and lng coordinates
@array = []
@locations.each do |location|
@array.push({
lat: location.latitude,
lng: location.longitude
})
end
And then in js.erb
, just do 然后在js.erb
,只需执行
var locations = '<%= @array %>';
Update: 更新:
With your updated code, the above example should like below 使用更新的代码,上面的示例应如下所示
@places = Place.all
@array = []
@places.each do |place|
@array.push({
lat: place.latitude,
lng: place.longitude
})
end
In your controller: 在您的控制器中:
places = Place.all
@coordinates = places.map{|place| {lat: place.latitude, lng: place.longitude}}
in your view: 在您看来:
var locations = <%= @coordinates.to_json %>;
I fixed it by combining answers from @dickieboy & @pavan and then adding in gsub to remove the quotes. 我通过组合@dickieboy和@pavan的答案,然后添加gsub来删除引号来解决了该问题。 I also moved all the code inside a script on my html page. 我还将所有代码移到了html页面上的脚本内。 Here's the complete code: 这是完整的代码:
Places Controller 位置控制器
def index
@places = Place.all
@array = []
@places.each do |place|
@array.push({
lat: place.latitude,
lng: place.longitude
})
end
end
Index.html.erb Index.html.erb
<div id="mapv2"></div>
<script type="text/javascript">
function initMap() {
var locations = <%= @array.to_json.gsub(/\s|"|'/,'') %>;
var mapv2 = new google.maps.Map(document.getElementById('mapv2'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
var markerCluster = new MarkerClusterer(mapv2, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
End result 最终结果
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.