问题描述
我在进行商店定位时遇到了一个问题。该API可以正常运行，但由于某些原因我的地图无法加载。我一直在尝试以各种方式显示地图，但是没有任何效果。我已经检查了它是否在后台，不是。任何帮助表示赞赏！在Windows 10上使用Google Chrome浏览器。我当前的HTML代码：
<html>
<head>
<script src='https://api.mapBox.com/mapBox-gl-js/v1.12.0/mapBox-gl.js'></script>
<link href='https://api.mapBox.com/mapBox-gl-js/v1.12.0/mapBox-gl.css' rel='stylesheet' />
</head>
<body>
<div class="container my-3">
<h1 class="display-4 text-center">
<i class="fas fa-map-marked mr-4"></i>Store Locator
</h1>
<a (click)="toAdd();" class="btn btn-success mb-4">Add Store</a>
<div id="map" style="width: 100%; height: 500px; border-radius: 5px;"></div>
</div>
<script src="js/map.js"></script>
</body>
</html>
我的map.js脚本：
mapBoxgl.accesstoken = 'pk.eyJ1IjoidG9tYWp1bGkiLCJhIjoiY2tlZWQxYzVnMTBrdzMxbXRmdW5sYW1jeiJ9.Iwm-KsArvbOAzb1ddDJyWQ';
const map = new mapBoxgl.Map({
container: 'map',style: 'mapBox://styles/mapBox/streets-v11',zoom: 9,center: [-71.157895,42.707741]
});
文件设置：directories 地图应位于的图片：place where map should be
解决方法
这里有很多事情需要调查：
class BodyOfApp extends React.Component {
performAction = (e) => {
e.preventDefault();
const { currentInputs } = this.props;
getFunc(currentInputs).then((dataOfTripCard) => {
this.props.currentProjectData({
dataOfTripCard
})
});
}
render() {
return (
//jsx code here
)
}
}
const mapStateToProps = state => ({
currentInputs: state.inputs.currentInputs
});
const mapDispatchToProps = dispatch => ({
// currentInputs: inputs => dispatch(currentInputs(inputs)),toggleSubmittedOrNot: popUp => dispatch(toggleSubmittedOrNot(popUp)),toggleShowPopUp: () => dispatch(toggleShowPopUp()),currentProjectData: projectData => dispatch(currentProjectData(projectData))
});
export default connect(mapStateToProps,mapDispatchToProps)(BodyOfApp);
元素是否在您期望的位置创建？将其背景设置为黄色即可查看。
您的Java脚本实际上正在执行吗？发出警报。
是否正在加载Mapbox库？检查网络标签。
地图元素是否已初始化？创建之后，记录div的值。
任何这些事情都可能出错。
我对这一行也很怀疑：
该map不是标准HTML。我不知道这是否是造成您问题的原因。