如何在 Ruby on Rails 中将 JSON responseText 应用于谷歌地图？答案

【问题标题】：How to apply JSON responseText to Google Maps in Ruby on Rails?如何在 Ruby on Rails 中将 JSON responseText 应用于谷歌地图？
【发布时间】：2018-04-06 14:19:44
【问题描述】：

因此，在我的 Rails 应用程序中，我正在构建一个包含多个位置的区域显示页面。用户可以插入新的位置，地图标记需要根据他们输入的纬度和经度动态放置。在我的区域显示页面中，我有以下内容：

<div class="container-fluid">
 <div class="row">
  <div class="banner" id="region-banner" data-region-name="<%=@region.name.downcase%>">
 <script>document.addEventListener('DOMContentLoaded',app.regions);</script>

然后在我的 region.js 文件中，我有以下内容：

 import { tns } from 'tiny-slider/src/tiny-slider.module';
 import { mapStyle } from './styles/mapStyle';

 app.regions = () => {
   function init() {
    startGoogleMap();
   }

  let startGoogleMap = () => {
    let map = new google.maps.Map(document.getElementById('region-banner'), {
      zoom: 3,
      minZoom: 3,
      disableDefaultUI: true,
      gestureHandling: 'cooperative',
      styles: mapStyle
    });
    var mapElement = document.getElementById('region-banner');
    const regionName = mapElement.getAttribute('data-region-name');

    let bounds = new google.maps.LatLngBounds();

    let promise = $.getJSON('/locations.json');

    promise.done(function(data) {
      return $.each(data, function() {
        return new google.maps.Marker({
          position: { 
              lat: parseFloat(data.lat), 
              lng: parseFloat(data.lng) },
          map: map,
          icon: "/marker.png"
        });
      });
    });
    console.log(promise);

    map.fitBounds(bounds);
  };

  return init();
};

然后在我的控制器中我有：

  def show
   @locations = Location.all
   respond_to do |format|
     format.json { render json: @locations }
     format.html
   end
 end

所以没有真正的错误正在应用但是......什么都没有出现。控制台显示 responseText：“[{“id”: 5, “name”: “Chicago”, “abbreviation”: “CHI”, “lat”: “44.222”, “lng”: “-22.111”}, { “id”：6，“名称”：“法兰克福”，“缩写”：“FKT”，“lat”：“41.3232”，“lng”：“-19.5221”}]”。在这个页面上，我应该只需要/使用第一个。

既然我放了位置，在这个阶段不应该也应用标记吗？

【问题讨论】：

标签： javascript ruby-on-rails google-maps

【解决方案1】：

这是负责设置您的Markers 的代码。

我会专注于理解为什么 promise.done() 不运行从您的回复中为您的(data) 中的每一行创建new google.maps.Marker()。

可能问题与/marker.png有关

promise.done(function(data) {
  return $.each(data, function() {
    return new google.maps.Marker({
      position: { 
          lat: parseFloat(data.lat), 
          lng: parseFloat(data.lng) },
      map: map,
      icon: "/marker.png"
    });
  });
});

【讨论】：