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


任何想法将不胜感激!

最佳答案

我确定您必须使用的旧版本的map-boxgl最有可能是v 0.20.1,只需将链接中的版本更改为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' />

09-25 19:19