gpt4 book ai didi

javascript - 从 Rails 数据库添加标记

转载 作者:行者123 更新时间:2023-11-28 12:17:53 25 4
gpt4 key购买 nike

我正在使用 Google Maps API 创建 map ,以根据餐厅的位置来引用餐厅。我的数据库(sqlite3)中的每个餐厅都有一个标题、一个描述和两个坐标(纬度、经度)。我可以在数据库中成功创建条目,但很难找到一种解决方案来从数据库中调用 JS 每个餐厅的坐标。

Stackoverflow 上提出了不同的解决方案,其中 this one , another和一个last one ,但没有一个回答我的问题,因为我只使用 JS 和 Ruby(在 Rails 上)。

您有什么建议吗?

最佳答案

首先,您需要阅读this example来自 Goolge Maps Javascript API 并使用以下代码:

<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&callback=initMap">
</script>
</body>
</html>

正如您在这里看到的,您需要

  • 创建您自己的 GOOGLE_MAPS_API_KEY here
  • 使用 id 创建 div
  • 连接 Google 的 javascript,加载时也会加载 js 函数 initMap()
  • 定义带有 map 和标记设置的initMap函数。

下一步:从数据库获取数据并传递给 JavaScript

我用了gon gem用于将数据从后端传输到前端:

在 Controller 中:

# app/controllers/application_controller.rb
def root
gon.locations = Location.all
end

在布局中:

<!-- app/views/layouts/application.html.erb -->
<head>
<%= include_gon %>
<!-- ... -->
</head>

查看:

<!-- app/views/application/root.html.erb -->
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: { lat: gon.locations[0].lat, lng: gon.locations[0].lng }
});

for(var i = 0; i < gon.locations.length; i++){
new google.maps.Marker({
position: { lat: gon.locations[i].lat, lng: gon.locations[i].lng },
title: gon.locations[i].name,
map: map
});
}
}
<script>

但是,如果您不想使用 gon gem为了将数据从后端传递到前端,您可以通过普通 rails 来完成此操作:

# app/controllers/application_controller.rb
def root
@json_data = {
locations: {
# ...
},
# ...
}.to_json
end

<!-- views/posts/edit.html.erb -->
<script>
var json_data = JSON.parse('<%= raw(escape_javascript(@json_data)) %>');
</script>

此外,我创建了 rails demo application ,你可以玩一下。

  • This commit完成所有工作,在南极洲的标记上写下“ICE”字样。 enter image description here
  • 请参阅这些文件以了解更多详细信息:
    • app/controllers/application_controller.rb
    • app/views/application/root.html.erb
    • app/views/layouts/application.html.erb
  • 我用过this online service为“ICE”单词创建坐标

关于javascript - 从 Rails 数据库添加标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45118406/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com