我厌倦了使用谷歌地点来抓取一些餐厅标记,但我不知道如何将它与“@react-google-maps/api”结合起来。
我看到了这个帖子:Google map with react-google-maps API
似乎将“位置”传递给加载程序,但我不确定在那之后该怎么做,例如我该如何做这样的事情
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);
}
});
}
答案 0 :(得分:0)
您提供的代码片段正在使用 Find Place From Query,它是 Places Library of Google Maps JavaScript API 下的服务之一。
@react-google-maps/api 是一个库,旨在为 Google Maps JavaScript API 提供非常简单的绑定,并且如文档所述,它只有用于地点库的 Autocomplete 和 StandaloneSearchBox 组件。
如果您想使用 Find Place From Query,您可以通过在地图加载时调用 findPlaceFromQuery()
方法来实现它。您将在下面的代码片段中看到,我在 onMapLoad()
函数中调用它。我还将 state
用于 center
和 coordsResults
,它们将保存 findPlaceFromQuery 结果的数组。然后,在显示结果标记之前,我将使用条件检查 coordsResults
状态。下面是 sample code 和代码片段:
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;