[英]Can I use Google Places with react-google-maps/api?
I am tiring to use google places to grab some restaurant markers but I am not sure how to combine it with "@react-google-maps/api".我厌倦了使用谷歌位置来抓取一些餐厅标记,但我不确定如何将它与“@react-google-maps/api”结合使用。
I saw this post: Google map with react-google-maps API我看到了这篇文章: Google map 与 react-google-maps API
which seem to pass in "places" to the loader but I am unsure of what to do after that like how do I do something like this这似乎在“地方”传递给装载机,但我不确定在那之后该怎么做,比如我该怎么做这样的事情
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'],
};
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++) {
createMarker(results[i]);
}
map.setCenter(results[0].geometry.location);
}
});
}
The code snippet you provided is using Find Place From Query which is one of the services under the Places Library of Google Maps JavaScript API .您提供的代码片段使用Find Place From Query ,这是Google Maps JavaScript API 的 Places Library下的服务之一。
The @react-google-maps/api is a library that was created to provide very simple bindings to Google Maps JavaScript API and as the documentation states, it only have Autocomplete and StandaloneSearchBox components for Places Library. @react-google-maps/api是一个库,它的创建是为了提供与 Google Maps JavaScript API 的非常简单的绑定,并且正如文档所述,它只有用于 Places Library 的 Autocomplete 和 StandaloneSearchBox 组件。
If you would like to use the Find Place From Query, you can implement it by calling the findPlaceFromQuery()
method when the map loads.如果您想使用 Find Place From Query,您可以通过在 map 加载时调用
findPlaceFromQuery()
方法来实现它。 You will see that in my code snippet below, I call it in the onMapLoad()
function.您将在下面的代码片段中看到,我在
onMapLoad()
function 中调用它。 I also use state
for center
and coordsResults
that will hold the array for the findPlaceFromQuery result.我还将
state
用于center
和coordsResults
,它们将保存 findPlaceFromQuery 结果的数组。 I will then use a condition to check the coordsResults
state before showing the marker for the result.然后,在显示结果标记之前,我将使用条件检查
coordsResults
state。 Here is the sample code and code snippet below:下面是示例代码和代码片段:
import React from "react";
import { GoogleMap, Marker, InfoWindow } from "@react-google-maps/api";
let coords = [];
class Map extends React.Component {
state = {
center: { lat: -33.867, lng: 151.195 },
coordsResult: []
};
onMapLoad = map => {
let request = {
query: "Museum of Contemporary Art Australia",
fields: ["name", "geometry"]
};
let service = new google.maps.places.PlacesService(map);
service.findPlaceFromQuery(request, (results, status) => {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
coords.push(results[i]);
}
this.setState({
center: results[0].geometry.location,
coordsResult: coords
});
}
});
};
render() {
return (
<div>
<GoogleMap
center={this.state.center}
zoom={13}
onLoad={map => this.onMapLoad(map)}
mapContainerStyle={{ height: "400px", width: "800px" }}
>
{this.state.coordsResult !== [] &&
this.state.coordsResult.map(function(results, i) {
return (
<Marker key={i} position={results.geometry.location}>
<InfoWindow
options={{ maxWidth: 300 }}>
<span>{results.name}</span>
</InfoWindow>
</Marker>
);
})}
</GoogleMap>
</div>
);
}
}
export default Map;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.