Question

我正在尝试从我的foursquare Feed获取坐标，并在地图中使用它们以在网站上显示。主要是作为学习javascript和Mapbox的练习 - 我是新手。

我使用了mapbox'添加单个标记'代码和其他一些代码来遍历我的KML以找到坐标since mapbox does not accept the KML。

不知何故，我无法让它发挥作用。非常感谢任何提示！

<!-- Foursquare map -->
<script>

    // get coordinates and place from Foursquare feed
    $(document).ready(function(){

        $.get("https://feeds.foursquare.com/history/6a46a109e06aa6d74d34b42b397806d5.kml?count=1", function(data){

            $(data).find("Placemark").each(function(index, value){

                coords = $(this).find("coordinates").text();
                place = $(this).find("name").text();
                pos = coords.split(",")

                    var features = [{
                        "geometry": { "type": "Point", "coordinates": pos[0], pos[1]},
                        "properties": { "place": place }       
                    }];
            });
        });
    });        

    // start Mapbox
    var map = mapbox.map('map-canvas').zoom(5).center({
        lat: 0,
        lon: 0
        });

  map.addLayer(mapbox.layer().id('rikwuts.map-0i5jiwdn'));

  // Create an empty markers layer
  var markerLayer = mapbox.markers.layer().features(features);

  // Add interaction to this marker layer. This
  // binds tooltips to each marker that has title
  // and description defined.
  mapbox.markers.interaction(markerLayer);
  map.addLayer(markerLayer);

  // Add a single feature to the markers layer.
  // You can use .features() to add multiple features.
  markerLayer.add_feature({
      geometry: {
          // The order of coordinates here is lon, lat. This is because
          // we use the GeoJSON specification for all marker features.
          // (lon, lat is also the internal order of KML and other geographic formats)
          coordinates: [ pos.lng, pos.lat ]
      },
      properties: {
          // these properties customize the look of the marker
          // see the simplestyle-spec for a full reference:
          // https://github.com/mapbox/simplestyle-spec
          'marker-color': '#00ff00',
          'marker-symbol': 'star-stroked',
          title: place,
          description: 'This is a single marker.'
      }
  });

  // Attribute map
  map.ui.attribution.add()
      .content('<a href="http://mapbox.com/about/maps">Thanks to Mapbox</a>');
</script>

<div id="map-canvas"></div>
<!-- END map -->

Answer 1

您可以使用toGeoJSON将KML转换为MapBox.js的GeoJSON。

从KML Feed获取坐标以与mapbox一起使用

1 个答案: