我是 React JS 的新手。我有以下代码使用 JAvascript 生成 map 。
<title>Untitled Document</title>
</head>
<body>
<div id="map" style="height:800px;"></div>
<script>
function initMap() {
var myLatLng = {lat: 33.847862, lng: -84.363433};
var locations = [
//list of locations
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
// Create a map object and specify the DOM element for display.
var map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
scrollwheel: true,
zoom: 10
});
var icon = "img/store_marker.png"
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: icon
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("<h3>"+locations[i][0]+ "</h3><br/>"+locations[i][4]+", <br/>"+locations[i][5]+", <br/>"+locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZqPocCNt5mdLvKi5fm72jq6e9on_IoaM&callback=initMap" async defer></script>
</body>
</html>
我需要使用此代码使用 React JS 生成 map 。我写了下面的代码，但我没有看到屏幕上呈现任何东西。下面是我的 App.jsx。
import React from 'react';
import GoogleMap from 'google-map-react';
import MyGreatPlace from './my_great_place.jsx';
class App extends React.Component {
constructor(props) {
super(props);
}
initMap() {
var myLatLng = {lat: 33.847862, lng: -84.363433};
var locations = [
//list of locations
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
// Create a map object and specify the DOM element for display.
var map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
scrollwheel: true,
zoom: 10
});
var icon = "img/store_marker.png"
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: icon
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent("<h3>"+locations[i][0]+ "</h3><br/>"+locations[i][4]+", <br/>"+locations[i][5]+", <br/>"+locations[i][6]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
render() {
initMap();
return (
<div id="map" style="height:800px;"></div>
);
}
}
App.propTypes = {
}
App.defaultProps = {
center: [33.847862, -84.363433],
zoom: 10,
scrollwheel: true
}
export default App;
下面是我的 index.html。
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZqPocCNt5mdLvKi5fm72jq6e9on_IoaM" async defer></script>
</body>
</html>
我删除了 JS html url 中的“&callback=initMap”，因为 React JS 中没有这样的回调。有人可以帮忙吗？
最佳答案
我看不到任何调用 React 渲染组件的地方，应该有:
ReactDOM.render(
<Foo/>,
document.getElementById('bar')
);
在代码的某处，如果你想让 React 渲染到屏幕上。
看看https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html
和:https://facebook.github.io/react/docs/displaying-data.html
关于javascript - 将 javascript map 代码转换为 React，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39359773/