我目前正在尝试使用传单设置地图。我在jsfiddle中设置了地图组件和应用程序组件,一切运行正常(https://jsfiddle.net/myulz/8Lg4qpmf/36/ ),但是当我尝试在本地运行非常相似的项目(components文件夹中的MapContainer和项目根目录中的主App组件)时,似乎没有任何CDN软件包正在加载,因为我收到此错误:
Failed to compile.
./src/components/MapContainer.js
Line 7: 'L' is not defined no-undef
Line 8: 'L' is not defined no-undef
Line 16: 'L' is not defined no-undef
Line 22: 'L' is not defined no-undef
Line 23: 'L' is not defined no-undef
Line 24: 'L' is not defined no-undef
Line 29: 'FreeDraw' is not defined no-undef
Line 29: 'FreeDraw' is not defined no-undef
这些软件包在jsfiddle上运行正常但在本地运行不正常吗?
public / index.html *使用react-router,将我的应用程序组件设置为路由,并将路由器发送到#root
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.js"></script>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script src="https://rawgit.com/Wildhoney/Leaflet.FreeDraw/master/dist/leaflet-freedraw.web.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
import React, { Component } from 'react';
import './App.css';
import MapContainer from './components/MapContainer'
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<MapContainer/>
</div>
)
}
}
export default App;
import React from 'react';
import '../style.css';
class MapContainer extends React.Component {
componentDidMount() {
// create map
var map = L.map('map', {
center: new L.LatLng(38.898584, -77.020940),
zoom: 10,
maxBounds: bounds,
minZoom: 4
});
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {
minZoom: 0,
maxZoom: 18,
attribution: osmAttrib
});
var bounds = L.latLngBounds(
L.latLng(5.499550, -167.276413), //Southwest
L.latLng(83.162102, -52.233040) //Northeast
);
map.addLayer(osm);
const freeDraw = new FreeDraw({ mode: FreeDraw.ALL });
map.addLayer(freeDraw);
}
render() {
return <div id="map"></div>
}
}
export default MapContainer;
答案 0 :(得分:0)
您应该使用window.L
和window.FreeDraw
而不是L
和FreeDraw