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

Get coordinates from KML feed to use with mapbox

本文关键字:mapbox 一起 坐标 KML 获取      更新时间:2023-09-26

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

我使用mapbox 'add single marker'代码和一些其他代码循环遍历我的KML以查找坐标,因为mapbox不接受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 -->

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