如何使用 React 实现 google Place's Searches,在地图上创建标记?
How to use react to implement google Place's Searches, to create markers on the map?
我是 React 新手,我已经创建了一个 React 项目。我想知道如何使用这个默认的启动项目来实现代码:
code link from google。代码如下,感谢google,上面有链接。
Css file-
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
HTML file-
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>
Java script (pure js) file -
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var map;
var service;
var infowindow;
function initMap() {
var sydney = new google.maps.LatLng(-33.867, 151.195);
infowindow = new google.maps.InfoWindow();
map = new google.maps.Map(
document.getElementById('map'), {center: sydney, zoom: 15});
var request = {
query: 'Museum of Contemporary Art Australia',
fields: ['name', 'geometry'],
};
service = new google.maps.places.PlacesService(map);
service.findPlaceFromQuery(request, function(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
map.setCenter(results[0].geometry.location);
}
});
}
function createMarker(place) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
我知道我需要使用 google maps js 和 google places 创建我的密钥,但是由于我是 React 的新手,所以我不确定如何将其实现到我的新 React 项目中.请有人告诉我如何将这些代码文件放在一起以适合 React 项目。如果我到处都是,我很抱歉。
你可以参考我做的这个code。请记住更改 "YOUR_API_KEY" 的值,以便地图正常工作。
这里是 App.js 代码片段:
import React from 'react';
import './App.css';
import Map from './components/placeSearch';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
map: {}
}
}
handleMapLoad = (map) => {
this.setState({
map: map
})
}
render() {
return (
<div className="App">
<Map id="myMap" options={{center: { lat: 51.501904, lng: -0.115871 }, zoom: 13}} onMapLoad = {this.handleMapLoad}/>
</div>
);
}
}
export default App;
地点搜索的代码可以在 placeSearch.js 的地图组件中找到。在此处更改 API 键的值。
import React from "react";
import ReactDOM from 'react-dom';
const map;
var markers = [];
var infowindow;
const API_KEY = "YOUR_API_KEY";
var place = [];
class Map extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = `https://maps.googleapis.com/maps/api/js?key=` + API_KEY + `&libraries=geometry,places`;
script.id = 'googleMaps';
script.async = true;
script.defer = true;
document.body.appendChild(script);
script.addEventListener('load', e => {
this.onScriptLoad()
})
}
onScriptLoad() {
map = new window.google.maps.Map(document.getElementById(this.props.id), this.props.options);
this.props.onMapLoad(map)
var request = {
query: 'Museum of Contemporary Art Australia',
fields: ['name', 'geometry'],
};
var service = new google.maps.places.PlacesService(map);
service.findPlaceFromQuery(request, function(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
var marker = new google.maps.Marker({
map: map,
position:place.geometry.location,
title: place.formatted_address,
});
markers.push(marker);
infowindow = new google.maps.InfoWindow();
marker.addListener('click', () => {
infowindow.setContent(place.name);
infowindow.open(map, marker);
});
}
map.setCenter(results[0].geometry.location);
}
})
}
render() {
return (
<div id = "root" >
<div className = "map" id = {this.props.id}/>
</div>
)
}
}
export default Map;
希望对您有所帮助!
我是 React 新手,我已经创建了一个 React 项目。我想知道如何使用这个默认的启动项目来实现代码: code link from google。代码如下,感谢google,上面有链接。
Css file-
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
HTML file-
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>
Java script (pure js) file -
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var map;
var service;
var infowindow;
function initMap() {
var sydney = new google.maps.LatLng(-33.867, 151.195);
infowindow = new google.maps.InfoWindow();
map = new google.maps.Map(
document.getElementById('map'), {center: sydney, zoom: 15});
var request = {
query: 'Museum of Contemporary Art Australia',
fields: ['name', 'geometry'],
};
service = new google.maps.places.PlacesService(map);
service.findPlaceFromQuery(request, function(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
map.setCenter(results[0].geometry.location);
}
});
}
function createMarker(place) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
我知道我需要使用 google maps js 和 google places 创建我的密钥,但是由于我是 React 的新手,所以我不确定如何将其实现到我的新 React 项目中.请有人告诉我如何将这些代码文件放在一起以适合 React 项目。如果我到处都是,我很抱歉。
你可以参考我做的这个code。请记住更改 "YOUR_API_KEY" 的值,以便地图正常工作。
这里是 App.js 代码片段:
import React from 'react';
import './App.css';
import Map from './components/placeSearch';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
map: {}
}
}
handleMapLoad = (map) => {
this.setState({
map: map
})
}
render() {
return (
<div className="App">
<Map id="myMap" options={{center: { lat: 51.501904, lng: -0.115871 }, zoom: 13}} onMapLoad = {this.handleMapLoad}/>
</div>
);
}
}
export default App;
地点搜索的代码可以在 placeSearch.js 的地图组件中找到。在此处更改 API 键的值。
import React from "react";
import ReactDOM from 'react-dom';
const map;
var markers = [];
var infowindow;
const API_KEY = "YOUR_API_KEY";
var place = [];
class Map extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = `https://maps.googleapis.com/maps/api/js?key=` + API_KEY + `&libraries=geometry,places`;
script.id = 'googleMaps';
script.async = true;
script.defer = true;
document.body.appendChild(script);
script.addEventListener('load', e => {
this.onScriptLoad()
})
}
onScriptLoad() {
map = new window.google.maps.Map(document.getElementById(this.props.id), this.props.options);
this.props.onMapLoad(map)
var request = {
query: 'Museum of Contemporary Art Australia',
fields: ['name', 'geometry'],
};
var service = new google.maps.places.PlacesService(map);
service.findPlaceFromQuery(request, function(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
var marker = new google.maps.Marker({
map: map,
position:place.geometry.location,
title: place.formatted_address,
});
markers.push(marker);
infowindow = new google.maps.InfoWindow();
marker.addListener('click', () => {
infowindow.setContent(place.name);
infowindow.open(map, marker);
});
}
map.setCenter(results[0].geometry.location);
}
})
}
render() {
return (
<div id = "root" >
<div className = "map" id = {this.props.id}/>
</div>
)
}
}
export default Map;
希望对您有所帮助!