我第一次使用 mapboxgl。我从github找到了源代码。地图工作正常,但标记显示在地图之外。不明白是什么问题..
代码如下_
import React, { Component } from "react";
import ReactDom from "react-dom";
import mapboxgl from "mapbox-gl";
mapboxgl.accessToken =
"pk.eyJ1Ijoibml0dGFuYW5kbyIsImEiOiJja3AzeGsxdXUxd2dtMnBvMjFncHV2MWQzIn0.T3wHeHz_mCHk1AcExPm8mA";
const data = [
{
location: "Panthapath",
city: "Dhaka",
state: "Bangladesh",
coordinates: [90.38382231219224, 23.75296142856617],
},
];
class Gmap extends React.Component {
constructor(props) {
super(props);
this.state = {
lng: 90.38382231219224,
lat: 23.75296142856617,
zoom: 16,
};
}
componentDidMount() {
const map = new mapboxgl.Map({
container: this.mapContainer,
style: "mapbox://styles/mapbox/streets-v11",
center: [this.state.lng, this.state.lat],
zoom: this.state.zoom,
});
data.forEach((location) => {
console.log(location);
var marker = new mapboxgl.Marker()
.setLngLat(location.coordinates)
.setPopup(
new mapboxgl.Popup({ offset: 30 }).setHTML(
"<h4>" + location.city + "</h4>" + location.location
)
)
.addTo(map);
});
}
render() {
return (
<div>
<div
ref={(el) => (this.mapContainer = el)}
style={{ width: "80%", height: "80vh", margin: "0 auto" }}
/>
</div>
);
}
}
export default Gmap;
在终端中显示错误“已定义标记但从未使用过”。但是地图正在按预期加载地图部分的标记