重新渲染 GoogleMapReact

Question

您好，我正在创建 nextjs 应用程序，其中我使用了 google-map-react 库中的 GoogleMapReact，我想根据新的 prop 重新渲染我的 GoogleMapReact 组件

这是我的 map.js 文件

import GoogleMapReact from 'google-map-react'
import { AsYouType } from 'libphonenumber-js'
import React, { useState, useEffect } from 'react';

const phoneFormat = new AsYouType('US')
const Marker = props => `
  <div class="max-w-sm rounded overflow-hidden shadow-lg">
    <div class="px-2">
      <div class="font-bold text-base mb-2 text-blue-500">
        <a href=${"/locations/"+props.id}>
          ${props.city}
        </a>
      </div>
      <p class="text-dark-400 text-sm">${props.street}</p>
      <p class="text-dark-400 text-sm mb-2">
        ${props.city}, ${props.stateIso}, ${props.countryIso}, ${props.postalCode}
      </p>
      <p class="text-gray-700 font-medium mb-2">
        Phone: <span class="font-light">${phoneFormat.input(props.phone)}</span>
      </p>
      <p>
        <a class="text-blue-500" href="https://www.google.com/maps/dir/'+${props.defaultLat}+','+${props.defaultLng}+'/'+${props.latitude}+','+${props.longitude}+'">
        Directions
        </a>
      </p>
    </div>
  </div>
`
// Map component should always take in array of LocationSummary object
// ToDo: setting prop types.
export default function Map(props) {
  const defaultProps = {
    center: {
    lat: (typeof(props.latitude) === "undefined" ? 37.0902 : props.latitude),
    lng: (typeof(props.longitude) === "undefined" ? 95.7129: props.longitude),
    },
    zoom: 5
  }

  function handleApiLoaded(map){  
    let infowindow = new google.maps.InfoWindow()
    props.locations.map((location) => {
      let marker = new google.maps.Marker({position: {lat: parseFloat(location.latitude), lng: parseFloat(location.longitude)}, map: map, title: location.name})
      marker.addListener('click', function() {
        infowindow.close()
        infowindow.setContent(Marker(location))
        infowindow.open(map, marker)
      })
    })
  }
  return (
    <div style={{ height: '500px', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: '123' }}
        center={defaultProps.center}
        defaultZoom={defaultProps.zoom}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={({ map }) => handleApiLoaded(map)}
      />

    </div>
  )
}

这里 prop.locations 有更新的数组结果，但问题是它没有在我的地图中刷新，谁能建议我如何做到这一点，以便我的地图将在数据更改时重新呈现？？

Answer 1

您以错误的方式使用onGoogleApiLoaded。

通过looking into the source code，您可以看到onGoogleApiLoaded 永远不会被调用两次：

if (!this_.googleApiLoadedCalled_) {
    this_._onGoogleApiLoaded({ map, maps, ref: this_.googleMapDom_ });
    this_.googleApiLoadedCalled_ = true;
}

您以错误的方式使用 react google map 组件。应该是这样的：

<GoogleMapReact
    bootstrapURLKeys={{ key: '123' }}
    center={defaultProps.center}
    defaultZoom={defaultProps.zoom}
>
    { props.locations.map(location => (
        <Marker 
            lat={location.lat}
            lng={location.lng}
        />
    )) }
</GoogleMapReact>

有关标记和信息窗口，请查看example