我是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' />