为什么我的代码不起作用? 仅显示一个标记 我使用google-maps-react
const data = {"shops":[{"name":"Tienda1","location":{"lat":-34.4712726922992,"lng":-58.75985026359558}},
{"name":"Tienda2","location":{"lat":-34.4684599474558,"lng":-58.757007122039795}},
{"name":"Tienda3","location":{"lat":-34.46932677829895,"lng":-58.760215044021606}},
{"name":"Tienda4","location":{"lat":-34.470989653082555,"lng":-58.76484990119934}}]}
return (
<div>
<Map google={window.google} initialCenter={{lat: -34.47509000000001, lng: -58.75374599999998}} zoom={10}>
{
data.shops.map((x)=>(<Marker key={uuid.v4()} {...x}/>))
}
</Map>
</div>
)
答案 0 :(得分:1)
我花了一些时间将google map与typescript配置集成在一起。因此,与您分享我的代码的人看看,它将对您和其他人有所帮助。
import React, {
Component
} from 'react'
import {
Map,
GoogleApiWrapper,
Marker,
InfoWindow
} from 'google-maps-react';
declare
var google: any;
interface IPageProps {
google ? : any;
center: ILatAndLng;
markersOptions: any[];
zoom: number;
containerStyle: any;
flightPositions ? : ILatAndLng[]
address ? : string;
centername ? : string
}
interface ILatAndLng {
lat: number;
lng: number;
}
export class MapComponent extends Component < IPageProps, any > {
constructor(props: any) {
super(props);
this.state = {
activeMarker: {},
selectedPlace: {},
showingInfoWindow: false
};
}
private onMarkerClick = (props: any, marker: any) =>
this.setState({
activeMarker: marker,
selectedPlace: props,
showingInfoWindow: true
});
private onInfoWindowClose = () =>
this.setState({
activeMarker: null,
showingInfoWindow: false
});
private onMapClicked = () => {
if (this.state.showingInfoWindow) {
this.setState({
activeMarker: null,
showingInfoWindow: false
});
}
};
public render() {
const {
markersOptions,
center,
zoom,
containerStyle,
flightPositions,
address
} = this.props
return ( <
Map google = {
this.props.google
}
onClick = {
this.onMapClicked
}
initialCenter = {
center
}
center = {
{
lat: center.lat,
lng: center.lng
}
}
/** @ts-ignore */
flightPlanCoordinates = {
flightPositions
}
zoom = {
zoom
}
containerStyle = {
containerStyle
} >
{
(Array.isArray(markersOptions) && markersOptions.length > 0) ? markersOptions.map((marker: any, markerIndex: number) => {
return ( <
Marker key = {
'marker ' + markerIndex
}
/** @ts-ignore */
label = {
markerIndex.toString()
}
name = {
markerIndex.toString()
}
onClick = {
this.onMarkerClick
}
position = {
{
lat: +marker.latitude,
lng: +marker.longitude
}
}
/>
)
}) : (center.lat !== null) && < Marker
/** @ts-ignore */
name = {
address
}
label = {
'H'
}
onClick = {
this.onMarkerClick
}
position = {
{
lat: center.lat,
lng: center.lng
}
}
/>} <
InfoWindow
marker = {
this.state.activeMarker
}
/** @ts-ignore */
onClose = {
this.onInfoWindowClose
}
visible = {
this.state.showingInfoWindow
} >
<
div >
<
h4 > {
/** @ts-ignore */
this.state.selectedPlace.name
} < /h4> <
/div> <
/InfoWindow> <
/Map>
);
}
}
const Container = GoogleApiWrapper({
apiKey: process.env.REACT_APP_GOOGLE_MAP_KEY,
version: "3.38",
region: 'US'
})(MapComponent as any) as any;
export default Container;
答案 1 :(得分:0)
确保您正在使用API,如示例here中所述。您必须使用withGoogleMap
和GoogleMap
创建地图。
此外,每个标记使用键position
代替location
来确定地图中的位置。
[{
position: {
lat: 25.0112183,
lng: 121.52067570000001,
},
key: `Taiwan`,
defaultAnimation: 2,
}, ...]
完成这些更改后,您的代码就可以正常运行。
答案 2 :(得分:0)
导出默认类MapRender扩展组件{
renderMarker(marker, index) {
return (<Marker
key={index}
zIndex={index}
position={new window.google.maps.LatLng(
marker.lat,
marker.lng
)}
/>)
}
render() {
//multiMarkers will contain all Markers like a array simple
var multiMarkers = []
const data = {
"shops": [{ "name": "Tienda1", "location": { "lat": -34.4712726922992, "lng": -58.75985026359558 } },
{ "name": "Tienda2", "location": { "lat": -34.4684599474558, "lng": -58.757007122039795 } },
{ "name": "Tienda3", "location": { "lat": -34.46932677829895, "lng": -58.760215044021606 } },
{ "name": "Tienda4", "location": { "lat": -34.470989653082555, "lng": -58.76484990119934 } }]
}
// After push all Markers in multiMarkers need only insert it in the map
data.shops.map((marker, index) => {
multiMarkers.push(this.renderMarker(marker, index))
return null
})
return (
<div>
<Map google={window.google}
initialCenter={{
lat: -34.47509000000001,
lng: -58.75374599999998
}}
zoom={10}>
{multiMarkers}
</Map>
</div>
)
}
}