@react-google-maps Marker LatLng 抛出错误

Question

我正在使用 @react-google-maps/api 来构建我的第一个反应图。但是我在 Marker 内的位置的 latLng 文字破坏了我的代码。这与我用于 center 的 latLng 格式不同吗？我的 Marker latLng 怎么错了？这似乎是 docs 中唯一必需的属性，所以我走投无路了。

import React, { Component } from 'react';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
import icon1 from '../map/icon1.svg';
import iconDead from '../map/iconDead.svg';

const center = { lat: 51.510228, lng: -0.132992 };
const API = 'xxxx'; 
const containerStyle = {
  width: '100%',
  height: '800px'
};

function MyComponent( markers, onToggleOpen ) {

  
  return (
    <LoadScript
      googleMapsApiKey={API}
    >
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        <Marker position={ lat: 51.510228, lng: -0.132992 }></Marker>
        <></>
      </GoogleMap>
    </LoadScript>
  )
}
 
export default React.memo(MyComponent)

Answer 1

位置属性是一个对象。像这样传递你的纬度和经度值：


<Marker position={{lat: 51.510228, lng: -0.132992}}></Marker>

@react-google-maps Marker LatLng 抛出错误

@react-google-maps Marker LatLng throwing error

reactjs

react-google-maps