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

我试图使用Mapbox将视频嵌入到标记中，但在定义geoJSON时遇到了一个问题

返回的错误是第91:20行的“UncaughtReferenceError:geoJSON未定义”。这指向代码的最后一位，上面写着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>

L.mapbox.accessToken='pk.eyj1ijoizmfiaw9tb24ilcjhijoi2ltew5rbhuzmdbm3z6bhloc3lwexfqesj9.u8vpTjZ 9qRL4QFinXcif8g'；
//为此地图构造用户无法创建的边界框
//搬出
西南风=L.latLng（38.688，-9.222），
东北=拉特林（38.794，-9.094），
边界=L.latLngBounds（西南、东北）；
var map=L.mapbox.map（'map'、'mapbox.light'{
//将该边界框设置为maxBounds以限制移动贴图
//请参阅完整的maxBounds文档：
// http://leafletjs.com/reference.html#map-最大界限
maxBounds:bounds，
maxZoom:19，
最小缩放：10
});
//将贴图缩放到该边界框
映射边界（bounds）；
L.mapbox.featureLayer({
//此功能采用GeoJSON格式：请参阅GeoJSON.org
//对于完整的规格
键入：“功能”，
几何图形：{
键入：“点”，
//这里的坐标是经度，纬度的顺序，因为
//x，y是GeoJSON和许多格式的标准
坐标：[
-9.152337,
38.757380
]
},
特性：{
标题：“极光项目”，
描述：'葡京'，
//可以通过添加simplestyle属性来自定义标记
// https://www.mapbox.com/guides/an-open-platform/#simplestyle
“标记大小”：“小”，
“标记颜色”：“d81010”，
“标记符号”：“电影院”，
视频：“”
}
}).addTo（地图）；
var myLayer=L.mapbox.featureLayer（）.addTo（map）；
//使用自定义要素特性在标记工具提示中添加iframe
myLayer.on（'layeradd'，函数（e）{
var标记=e.layer，
feature=marker.feature；
//从GeoJSON属性“video”创建自定义弹出内容
var popupContent=feature.properties.video；
//将弹出窗口绑定到标记http://leafletjs.com/reference.html#popup
marker.bindPopup（popupContent{
closeButton:false，
最小宽度：320
});
});
//向地图添加要素
setGeoJSON（geoJSON）；

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

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);

L.mapbox.accessToken='pk.eyj1ijoiahlwzxjiyxrvbiisimeoijjawx5ethiow0wmgdudmztnjnnnthmaq5in0.TFkmQoeiKHGDPxct3o9Jjg'；
//为此地图构造用户无法创建的边界框
//搬出
西南风=L.latLng（38.688，-9.222），
东北=拉特林（38.794，-9.094），
边界=L.latLngBounds（西南、东北）；
var map=L.mapbox.map（'map'、'mapbox.light'{
//将该边界框设置为maxBounds以限制移动贴图
//请参阅完整的maxBounds文档：
// http://leafletjs.com/reference.html#map-最大界限
maxBounds:bounds，
maxZoom:19，
最小缩放：10
});
//将贴图缩放到该边界框
映射边界（bounds）；
//GeoJSON表示Vimeo iframe具有“video”属性的点功能
var geoJson={
特点：[{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[-9.152337,38.757380]
},
“财产”：{
“标题”：“极光项目”，
“描述”：“里斯本”，
“标记大小”：“小”，
“标记颜色”：“d81010”，
“标志符号”：“电影院”，
“视频”：”
}
}]
};
var myLayer=L.mapbox.featureLayer（）.addTo（map）；
//使用自定义要素特性在标记工具提示中添加iframe
myLayer.on（'layeradd'，函数（e）{
var标记=e.layer，
feature=marker.feature；
//从GeoJSON属性“video”创建自定义弹出内容
var popupContent=feature.properties.video；
//将弹出窗口绑定到标记http://leafletjs.com/reference.html#popup
marker.bindPopup（popupContent{
closeButton:false，
最小宽度：320
});
});
//向地图添加要素
setGeoJSON（geoJson）；

演示

---

我的大部分信息来自by映射框，并通过检查。

您正在创建包含标记的要素图层，但弹出式侦听器已分配给代码中的另一个图层（myLayer）。看看这个例子，让视频弹出窗口工作[谢谢你的回答Jeffry。虽然下面Haroen的代码有效，而不是mapbox中的代码，但你也发现了问题。谢谢你Haroen。也许我有点困惑，因为我试图在构建视频功能和设置错误之前向地图添加另一个标记。如果这对你有帮助，你可以将我的答案设置为

accepted