[英]Rails - how to get information from database and put into javascript var
我正在使用一個模板在主頁上加載一張地圖,它從一個js文件(locations.js)獲取信息
更新
此代碼加載locations.js
function createHomepageGoogleMap(_latitude,_longitude){
setMapHeight();
if( document.getElementById('map') != null ){
$.getScript("assets/js/locations.js", function(){
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
scrollwheel: false,
center: new google.maps.LatLng(_latitude, _longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: mapStyles
});
var i;
var newMarkers = [];
for (i = 0; i < locations.length; i++) {
var pictureLabel = document.createElement("img");
pictureLabel.src = locations[i][7];
var boxText = document.createElement("div");
infoboxOptions = {
content: boxText,
disableAutoPan: false,
//maxWidth: 150,
pixelOffset: new google.maps.Size(-100, 0),
zIndex: null,
alignBottom: true,
boxClass: "infobox-wrapper",
enableEventPropagation: true,
closeBoxMargin: "0px 0px -8px 0px",
closeBoxURL: "assets/img/close-btn.png",
infoBoxClearance: new google.maps.Size(1, 1)
};
var marker = new MarkerWithLabel({
title: locations[i][0],
position: new google.maps.LatLng(locations[i][3], locations[i][4]),
map: map,
icon: 'assets/img/marker.png',
labelContent: pictureLabel,
labelAnchor: new google.maps.Point(50, 0),
labelClass: "marker-style"
});
newMarkers.push(marker);
boxText.innerHTML =
'<div class="infobox-inner">' +
'<a href="' + locations[i][5] + '">' +
'<div class="infobox-image" style="position: relative">' +
'<img src="' + locations[i][6] + '">' + '<div><span class="infobox-price">' + locations[i][2] + '</span></div>' +
'</div>' +
'</a>' +
'<div class="infobox-description">' +
'<div class="infobox-title"><a href="'+ locations[i][5] +'">' + locations[i][0] + '</a></div>' +
'<div class="infobox-location">' + locations[i][1] + '</div>' +
'</div>' +
'</div>';
//Define the infobox
newMarkers[i].infobox = new InfoBox(infoboxOptions);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
for (h = 0; h < newMarkers.length; h++) {
newMarkers[h].infobox.close();
}
newMarkers[i].infobox.open(map, this);
}
})(marker, i));
}
var clusterStyles = [
{
url: 'assets/img/cluster.png',
height: 37,
width: 37
}
];
var markerCluster = new MarkerClusterer(map, newMarkers, {styles: clusterStyles, maxZoom: 15});
$('body').addClass('loaded');
setTimeout(function() {
$('body').removeClass('has-fullscreen-map');
}, 1000);
$('#map').removeClass('fade-map');
// Dynamically show/hide markers --------------------------------------------------------------
google.maps.event.addListener(map, 'idle', function() {
for (var i=0; i < locations.length; i++) {
if ( map.getBounds().contains(newMarkers[i].getPosition()) ){
// newMarkers[i].setVisible(true); // <- Uncomment this line to use dynamic displaying of markers
//newMarkers[i].setMap(map);
//markerCluster.setMap(map);
} else {
// newMarkers[i].setVisible(false); // <- Uncomment this line to use dynamic displaying of markers
//newMarkers[i].setMap(null);
//markerCluster.setMap(null);
}
}
});
// Function which set marker to the user position
function success(position) {
var center = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.panTo(center);
$('#map').removeClass('fade-map');
}
});
// Enable Geo Location on button click
$('.geo-location').on("click", function() {
if (navigator.geolocation) {
$('#map').addClass('fade-map');
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
});
}
}
var locations = [
['2479 Murphy Court', "Minneapolis, MN 55402", "$36,000", 48.864352, 2.257218, "property-detail.html", "../assets/img/properties/property-11.jpg", "../assets/img/property-types/vineyard.png"],
['3398 Lodgeville Road', "Golden Valley, MN 55427", "$28,000", 48.858648, 2.273526, "property-detail.html", "../assets/img/properties/property-12.jpg", "../assets/img/property-types/warehouse.png"],
['2479 Murphy Court', "Minneapolis, MN 55402", "$36,000", 48.856277, 2.264256, "property-detail.html", "../assets/img/properties/property-13.jpg", "../assets/img/property-types/industrial-site.png"],
現在我想使用Rails從我的數據庫(postgres)中加載信息來加載我的地圖
有什么方法可以直接從postgres將此信息導入到locations.js文件中,而無需更改模板代碼?
我對開發不是很好,所以如果我使location.js的工作方式不同於某些地圖上的gem = /,那么操作起來會更容易
為了從數據庫中獲取信息,您將需要使用Ruby代碼,因為您的JS無法解釋Ruby,在這種情況下,您可以采取幾種方法。
1)在頁面某處的數據HTML屬性中呈現所需的數據,並在javascript文件中獲取它。
2)在您的html.erb文件中使用js.erb或直接呈現JS。
我個人更喜歡使用數據屬性方法。 您的模板可能如下所示。
<div class="map" data-map="<%= ['2479 Murphy Court'].to_json %>
# stuff
</div>
在您的js中,您可以做(假設您正在使用JQuery)
var locations = JSON.parse($('.map').data('map'));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.