Question

我正在尝试将Mapbox集成到静态页面中，但是我很难将geojson数组输入Mapbox以在程序上生成标记。我的ajax调用没有给出错误消息，但是没有geojson数据出现在控制台中，并且没有标记呈现给地图。当我放置一些内联geojson代替我的geojson时，标记会在地图上生成而没有任何问题。我对这里有什么不妥的想法？

static_pages_controller.rb

    class StaticPagesController < ApplicationController

      def map

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

        @experiences.each do |experience|
          @geojson << {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [experience.longitude, experience.latitude]
            },
            properties: {
              name: experience.name,
              address: experience.location,
              :'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

static_pages / map.html.erb

    <div id='map' style='width: 100%; height: 750px;'></div>
    <script>

    $(function() {
      mapboxgl.accessToken = 'pk.eyJ1IjoianJvY2tldGxhYiIsImEiOiJTOFhPc1hjIn0.jf1Gd5AeO6xVQoTA_KMhEg';
      var map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/light-v9',
          center: [-96, 37.8],
          zoom: 3
      });

      map.on('load', function() {
        $.ajax({
          dataType: 'text',
          url: '/map.json',
          success: function(data) {
            var geojson;
            geojson = $.parseJSON(data);
            return geojson;
            // add markers to map
            geojson.features.forEach(function(marker) {

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

              // make a marker for each feature and add to the map
              new mapboxgl.Marker(el)
              .setLngLat(marker.geometry.coordinates)
              .addTo(map);
            });
          },
          error:function() {
              alert("Could not load the events");
            },
        });
      });
    });
    </script>

服务器日志

    Started GET "/map.json" for 127.0.0.1 at 2018-02-06 16:07:27 -0800
    Processing by StaticPagesController#map as JSON
      Experience Load (0.3ms)  SELECT "experiences".* FROM "experiences"
    Completed 200 OK in 3ms (Views: 1.4ms | ActiveRecord: 0.3ms)

Answer 1

我最终搞清楚了！我需要移动一些javascript来为geojson正确输入并等待文件准备好并且在尝试加载标记和geojson之前加载地图。

更新了Javascript

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

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

        $.ajax({
          dataType: 'text',
          url: '/map.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 = 'marker';

              // make a marker for each feature and add to the map
              new mapboxgl.Marker(el)
              .setLngLat(marker.geometry.coordinates)
              .addTo(map);
            });
          },
          error:function() {
              alert("Could not load the events");
            }
        });


      });
    });

Mapbox GL JS Rails - 将GEOJSON数组加载到标记

1 个答案: