Question

我正在尝试使用Mapbox将视频嵌入到标记中，但我遇到了定义geoJSON的问题。

返回的错误是“未捕获的ReferenceError：未定义geoJSON”第91行：20。这指向代码的最后一位，它表示myLayer.setGeoJSON。

希望我可以扭转局面，但我仍然是Javascript的新手，似乎无法发现这个问题。

这是我的代码：

<script>
L.mapbox.accessToken ='pk.eyJ1IjoiZmFiaW9tb24iLCJhIjoiY2lteW5rbHUzMDBmM3Z6bHloc3lweXFqeSJ9.u8vpTjZ 9qRL4QFinXcif8g';
// Construct a bounding box for this map that the user cannot
// move out of
    var southWest = L.latLng(38.688, -9.222),
    northEast = L.latLng(38.794, -9.094),
    bounds = L.latLngBounds(southWest, northEast);

    var map = L.mapbox.map('map', 'mapbox.light', {
    // set that bounding box as maxBounds to restrict moving the map
    // see full maxBounds documentation:
    // http://leafletjs.com/reference.html#map-maxbounds
    maxBounds: bounds,
    maxZoom: 19,
    minZoom: 10
    });

    // zoom the map to that bounding box
    map.fitBounds(bounds);

    L.mapbox.featureLayer({
    // this feature is in the GeoJSON format: see geojson.org
    // for the full specification
    type: 'Feature',
    geometry: {
    type: 'Point',
    // coordinates here are in longitude, latitude order because
    // x, y is the standard for GeoJSON and many formats
    coordinates: [
      -9.152337,
      38.757380 
    ]
    },
    properties: {
    title: 'Projecto Aurora',
    description: 'Lisboa',
    // one can customize markers by adding simplestyle properties
    // https://www.mapbox.com/guides/an-open-platform/#simplestyle
    'marker-size': 'small',
    'marker-color': 'd81010',
    'marker-symbol': 'cinema',
     video: '<iframe width="560" height="315"    src="https://www.youtube.com/embed/_037xabLLAI" \n\
            frameborder="0" allowfullscreen></iframe>'
    }
    }).addTo(map);


    var myLayer = L.mapbox.featureLayer().addTo(map);

    // Add the iframe in a marker tooltip using the custom feature   properties
    myLayer.on('layeradd', function(e) {
    var marker = e.layer,
    feature = marker.feature;

    // Create custom popup content from the GeoJSON property 'video'
    var popupContent =  feature.properties.video;

    // bind the popup to the marker   http://leafletjs.com/reference.html#popup
    marker.bindPopup(popupContent,{
    closeButton: false,
    minWidth: 320
    });
    });

    // Add features to the map
    myLayer.setGeoJSON(geoJSON);
    </script>

Answer 1

您混淆了两种不同的方法来添加带弹出窗口的标记。这对我有用：

L.mapbox.accessToken = 'pk.eyJ1IjoiaHlwZXJiYXRvbiIsImEiOiJjaWx5eThiOW0wMGdudmZtNjNnNThmamQ5In0.TFkmQoeiKHGDPxct3o9Jjg';
// Construct a bounding box for this map that the user cannot
// move out of
var southWest = L.latLng(38.688, -9.222),
  northEast = L.latLng(38.794, -9.094),
  bounds = L.latLngBounds(southWest, northEast);

var map = L.mapbox.map('map', 'mapbox.light', {
  // set that bounding box as maxBounds to restrict moving the map
  // see full maxBounds documentation:
  // http://leafletjs.com/reference.html#map-maxbounds
  maxBounds: bounds,
  maxZoom: 19,
  minZoom: 10
});

// zoom the map to that bounding box
map.fitBounds(bounds);

// The GeoJSON representing a point feature with a property of 'video' for the Vimeo iframe
var geoJson = {
    features: [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-9.152337,38.757380]
      },
      "properties": {
        "title": "Projecto Aurora",
        "description": "Lisboa",
        "marker-size": "small",
        "marker-color": "d81010",
        "marker-symbol": "cinema",
        "video": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/_037xabLLAI\" frameborder=\"0\" allowfullscreen></iframe>"
      }
    }]
};

var myLayer = L.mapbox.featureLayer().addTo(map);

// Add the iframe in a marker tooltip using the custom feature properties
myLayer.on('layeradd', function(e) {
    var marker = e.layer,
        feature = marker.feature;

    // Create custom popup content from the GeoJSON property 'video'
    var popupContent =  feature.properties.video;

    // bind the popup to the marker http://leafletjs.com/reference.html#popup
    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 320
    });
});

// Add features to the map
myLayer.setGeoJSON(geoJson);

codepen上的演示。

我的大多数信息来自example地图框，并使用geojsonlint进行核对。

在mapbox中嵌入视频时未定义geojson

1 个答案: