Not sure why I get this error: mapboxgl.Marker is not a constructor

Question

我是 Mapboxgl 的新手，一直在使用它在使用 Cordova 的移动应用程序中渲染地图。到目前为止，地图渲染良好，并且可以按预期缩放。但是，当尝试添加自定义标记时，我得到 Uncaught TypeError: mapboxgl.Marker is not a constructor。

我已经三次检查我是否安装了 mapbox-gl.js 库并仔细检查了代码是否有错别字。此代码已在现有网页上运行，但现在我的目标是尝试在移动应用程序中使用它。

我已经在 CodePen 中使用了 mapboxgl 自定义标记的演示代码并且成功了 https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/。

function add_markers(geojson, poi, icon_name) {
// add markers to map
    geojson.features.forEach(function (marker) {
        var el = document.createElement('span');
        el.className = 'map-icon map-icon-map-pin marker '+poi;
        el.innerHTML = "<span class='tooltip "+icon(icon_name)+" marker-sub "+poi+"' title=\""+marker.properties.name+"\"></span>";
        // add marker to map
        new mapboxgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .addTo(map);
    });
}

数据是从这里模拟出来的：

var geojson = {
   "type": "FeatureCollection",
      "features": [
       {
        "type": "Feature",
        "properties": {
            "name": "Foo"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                -66.324462890625,
                -16.024695711685304
            ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "name": "Bar"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                -61.2158203125,
                -15.97189158092897
            ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "name": "Baz"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [
                -63.29223632812499,
                -18.28151823530889
            ]
        }
    }
]
};

我也试过只添加一个标准标记，但没有成功（同样的错误）：

var marker = new mapboxgl.Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map);

如有任何想法，我们将不胜感激！

Answer 1

我确定您一定是在使用旧版本的 map-boxgl，很可能是 v 0.20.1，只需将 link 中的版本更改为 v 0.38.0，如下所示：

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'>
</script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' 
rel='stylesheet' />

Not sure why I get this error: mapboxgl.Marker is not a constructor

Not sure why I get this error: mapboxgl.Marker is not a constructor

javascript

cordova

mapbox-gl-js