[英]Using ruby array inside JS.erb to plot locations on a map
我是编码新手。 我正在尝试使用JS使用JS在Google的API上在地图上绘制点。 如果手动输入值,我可以使用它,但是我需要能够通过Ruby添加它们。
这是有效的代码:
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},
];
我要更改的是位置。 这是我想出的方法,但是没有用:
更新资料
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和经度以rails返回一组坐标。 希望这是有道理的。 如果您还有其他需要,请告诉我! 任何指向正确方向的建议或建设性的批评都将受到赞赏!
编辑:因此,在我的控制器中,我有:
def index
@places = Place.all
@longitude = @places.pluck(:longitude)
@latitude = @places.pluck(:latitude)
end
@latitude和经度返回一个坐标数组
那么在那种情况下它就行不通了,因为您需要用lat
和lng
作为键的哈希数组 。
您应该提取每个位置的纬度和经度 ,使用lat
, lng
键构造哈希并将其推入数组。
由于没有提供太多信息,因此我将假设并提供一个示例示例
例:
@locations = #location objects with lat and lng coordinates
@array = []
@locations.each do |location|
@array.push({
lat: location.latitude,
lng: location.longitude
})
end
然后在js.erb
,只需执行
var locations = '<%= @array %>';
更新:
使用更新的代码,上面的示例应如下所示
@places = Place.all
@array = []
@places.each do |place|
@array.push({
lat: place.latitude,
lng: place.longitude
})
end
在您的控制器中:
places = Place.all
@coordinates = places.map{|place| {lat: place.latitude, lng: place.longitude}}
在您看来:
var locations = <%= @coordinates.to_json %>;
我通过组合@dickieboy和@pavan的答案,然后添加gsub来删除引号来解决了该问题。 我还将所有代码移到了html页面上的脚本内。 这是完整的代码:
位置控制器
def index
@places = Place.all
@array = []
@places.each do |place|
@array.push({
lat: place.latitude,
lng: place.longitude
})
end
end
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>
最终结果
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.