Mapbox 标记控制器中的 GEOjson

Question

我有一个带有 GEOjson 的 Mapbox 地图，将所有“体验”显示为自定义标记。当我尝试采用相同的概念并将其仅应用于“显示”视图上的一个体验时，我无法正确输入数据并在控制台中不断收到 404 错误。有什么想法我错了吗？

experiences_controller.rb

    def geomap

      @experience = Experience.find(params[:id])

      respond_to do |format|
        format.json do
          render json: {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [@experience.latitude, @experience.longitude]
            },
            properties: {
              title: @experience.name,
              :'marker-color' => '#00607d',
              :'marker-symbol' => 'circle',
              :'marker-size' => 'medium'
            }
          }.to_json
        end
      end
    end

所有体验的原始地图控制器

    def map

      @experiences = Experience.published
      @geojson = Array.new

      @experiences.each do |experience|

        @geojson << {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [experience.longitude, experience.latitude]
          },
          properties: {
            title: experience.name,
            address: experience.location,
            image: experience.cover_photo(nil),
            price: experience.price,
            id: experience.id,
            cat_help: experience.cat_help,
            guide: experience.user.fullname,
            guide_id: experience.user.id,
            summary: experience.summary.truncate(150),
            :'marker-color' => '#00607d',
            :'marker-symbol' => 'circle',
            :'marker-size' => 'medium'
          }
        }
      end

      respond_to do |format|
        format.html
        format.json { render json: @geojson }  # respond with the created JSON object
      end

    end

Experiences.js

    $(function() {
      mapboxgl.accessToken = 'access-token';
      var map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox-style',
          center: [-96, 37.8],
          zoom: 3
      });

      map.on('load', function() {

        $.ajax({
          dataType: 'text',
          url: '/geomap.json',
          success: function(data) {
            var myjson;
            myjson = $.parseJSON(data);
            var geojson = {
              type: 'FeatureCollection',
              features: myjson
            };

            // add markers to map
            geojson.features.forEach(function(marker) {

              // create a HTML element for each feature
              var el = document.createElement('div');
              el.className = 'geomarker';

              // make a marker for each feature and add to the map
              new mapboxgl.Marker(el)
              .setLngLat(marker.geometry.coordinates)
              .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
              .setHTML('<a href="/experiences/' + marker.properties.id + '"><div class="row popup-bckg ml-0 mt-2 mb-0 align-items-end rounded" style="background-image:url(' + marker.properties.image + ')">' +
                       '<div class="w-100 row ml-0 marker-title rounded-bottom"><div class="col-9"><h4 class="mb-0"><strong>' + marker.properties.title + '</strong></h4><small>' + marker.properties.address + '</small></div>' +
                       '<div class="col-2"><h4><strong>$' + marker.properties.price + '</strong></h4></div></div></div></a>' +
                       '<div class="row mx-1 mt-3"><div class="col-md-6 align-items-start"><h4 class="mt-0 mb-0">SUMMARY</h4></div><div class="col-md-2 align-items-start"></div><small class="mt-0 mb-0">Guided by: <a href="/users/' + marker.properties.guide_id + '"><strong style="color:orange;">' + marker.properties.guide + '</strong></a></small></div>' +
                       '<div class="row justify-content-center"><div class="col-11"><hr class="mb-2 mt-1"/><p>' + marker.properties.summary + '</p></div></div>'))
              .addTo(map);
            });
          },
          error:function() {
              alert("Could not load the events");
            }
        });


      });
    });

routes.rb

    Rails.application.routes.draw do


      resources :experiences do
        member do


          get 'listing'
          get 'pricing'
          get 'description'
          get 'photo_upload'
          get 'amenities'
          get 'location'
          get 'about'
          get 'subcats'
          get 'languages'
          get 'timeslots'
          get 'geomap'
        end

        collection do
          get 'dashboard'
          get 'bookings'
        end

         resources :photos, only: [:create, :destroy]
         resources :timeslots, only: [:create, :destroy]
         resources :reservations, only: [:create]
         resources :calendars

         resources :subcategories

      end

      resources :subcategories do
        resources :experiences
      end

      resources :categories do
        resources :experiences
        resources :subcategories
      end

      devise_for :users, controllers: {
          sessions: 'users/sessions',
          passwords: 'users/passwords',
          registrations: 'users/registrations'
      }

      resources :host_requests do
        resources :users
      end

      resources :static_pages do
        resources :users
      end

      resources :users, only: [:show]


      get '/host_calendar' => "calendars#host"

      get 'search' => 'static_pages#search'



      get '/admin' => "admins#dashboard"

      get '/admin/experiences' => "admins#experiences"

      get '/admin/host_applications' => "admins#host_applications"

      post 'host-updater/:id', to: 'admins#host_update', as: :host_update


      get '/dashboard/admin/host_applications' => "users#dashboard_admin_hostapps"



      get '/map' => "static_pages#map"

      get '/activities' => "categories#activity"


      get '/hosting/dashboard' => "host_dashboards#home"

      get '/hosting/dashboard/experiences' => "host_dashboards#experiences"

      get '/hosting/dashboard/declined' => "host_dashboards#declined"

      get '/hosting/dashboard/bookings' => "host_dashboards#bookings"

      get '/hosting/dashboard/pending' => "host_dashboards#pending"

      get '/hosting/dashboard/incomplete' => "host_dashboards#incomplete"


      root to: "static_pages#home"
    end

Answer 1

像下面这样更新您的 AJAX 调用：

$.ajax({
      dataType: 'json',
      url: '/experiences/<%=j @experience.id.to_s %>/geomap.json',
    .........

Answer 2

我最终通过使它变得更简单来解决这个问题。我没有尝试将 geojson 写出控制器，而是在脚本中使用内联 ruby 来为 javascript 变量分配纬度和经度信息。然后我创建了一些内联 GeoJSON 并将这些变量用于坐标和其他特征信息。另外 - 将我的脚本从外部 js 文件中移出并移到 html.erb 视图中，以便它可以访问变量。这是更新后的脚本：

已更新Javascript

    <script>
    $(function() {
      mapboxgl.accessToken = 'pk.eyJ1IjoianJvY2tldGxhYiIsImEiOiJjajZuNnh5dm4wNTgyMndvMXNqY3lydjI4In0.gHVskGK1QuUoxm8sMwugWQ';
      var map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/jrocketlab/cjdcjrwbocrzs2rnurx4lg141',
          center: [-96, 37.8],
          zoom: 3
      });

      map.on('load', function() {

        var latitude = '<%= j @experience.latitude.to_s %>';
        var longitude = '<%= j @experience.longitude.to_s %>';
        var title = '<%= j @experience.name.to_s %>'

        var geojson = {
          type: 'FeatureCollection',
          features: [{
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [longitude, latitude]
            },
            properties: {
              title: title,
              description: 'Washington, D.C.'
            }
          }]
        };

        // add markers to map
        geojson.features.forEach(function(marker) {

          // create a HTML element for each feature
          var el = document.createElement('div');
          el.className = 'geomarker';

          // make a marker for each feature and add to the map
          new mapboxgl.Marker(el)
          .setLngLat(marker.geometry.coordinates)
          .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
          .setHTML('<h3 class="text-center">Where To Meet</h3>'))
          .addTo(map);
        });
      });
    });
    </script>

Mapbox 标记控制器中的 GEOjson

GEOjson in controller for Mapbox Markers

ruby-on-rails

geojson

mapbox-gl-js