reactjs - 重新渲染 GoogleMapReact
问题描述
嗨,我正在创建 nextjs 应用程序,其中我使用了 google-map-react 库中的 GoogleMapReact,我想根据新道具重新渲染我的 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 有更新的数组结果,但问题是它没有在我的地图中刷新,任何人都可以建议我如何做到这一点,以便我的地图将在数据更改时重新呈现?
解决方案
你用onGoogleApiLoaded
错了方法。
通过查看源代码,您可以看到它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>
对于标记和信息窗口,请查看示例
推荐阅读
- python - 如何使用python从excel复制图表并将其作为图表粘贴到powerpoint(不是图像)中
- object-detection - 如何将图像分类为多个类别?
- python - 将一些数据发送到 script.py 并接收另一个数据以将其放入 html
- c++ - Perl 中是否有任何类指针来访问成员变量和函数?
- node.js - 为什么我的注册用户发布请求失败并出现 500 错误?
- python - 用于数据集准备的 Python 多处理
- flutter - 如何在flutter中使用preload sqlite数据库
- python - 如何在 python 中使用 selenium 定位或提取 html 文件中的文本?
- mongodb - 当内部数组只有另一个数组时,使用 Arrayfilters 更新 MongoDB 文档
- javascript - 将日期从其他时区转换为 UTC [CST CDT]