Javascript 如何在Ruby on Rails中将JSON responseText应用于Google地图？

因此，在我的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>

 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

因此，没有真正的错误正在应用，但是…什么也没有出现。控制台显示响应文本：“[{“id”：5，“name”：“Chicago”，“缩写”：“CHI”，“lat”：“44.222”，“lng”：“-22.111”}，{“id”：6，“name”：“Frankfort”，“缩写”：“FKT”，“lat”：“41.3232”，“lng”：“-19.5221”}”。在这一页上，我只需要/使用第一个

---

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

这是负责设置

标记的代码

我将重点理解为什么
promise.done（）
没有运行，请根据您的回答为
（数据）
中的每一行创建
新的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"
    });
  });
});