Javascript 如何更新google地图而不触发react组件的重新渲染？

我试图在React中抽象出创建和渲染谷歌地图的过程——到目前为止，我大部分都是成功的，但我面临一个问题。由于我的设置方式，当我更新地图内容（PIN）时，会出现一个闪光是否有一种方法可以在不强制重新渲染的情况下更新属性（并将其传递给组件的子级？

请注意，我正在寻找一种方法，以便能够将我正在创建的标记作为道具传递进去-这是否意味着我总是需要重新渲染

存储map.tsx

import * as React from 'react';
import { MapComponent, Markable } from '../google';
import { Store } from './store.model';

export interface StoresMapProps {
    stores: Store[];
}

function mapStoreToMarker(store: Store): Markable {
    return {
        title: store.id,
        position: store.geoLoc
    };
}

export class StoresMapComponent extends React.Component<StoresMapProps, void> {
    shouldComponentUpdate(nextProps: StoresMapProps): boolean {
        return nextProps.stores !== this.props.stores;
    }

    render(): JSX.Element {
        const markers = this.props.stores.map(mapStoreToMarker);
        return (<MapComponent center={{ lat: 39.709396, lng: -105.145465 }} zoom={8} markers={markers} />);
    }
}

import * as React from 'react';
import configuration from '../../configuration';
import { GoogleSDK } from './sdk';

export interface Markable {
    position: { lat: number; lon: number; };
    title: string;
}

export interface MapComponentProps extends google.maps.MapOptions {
    markers?: Markable[];
}

export class MapComponent extends React.Component<MapComponentProps, void> {
    private _map: google.maps.Map;
    private _loadTheMap(id: string): void {
        GoogleSDK.load()
            .then(() => this._reallyLoadTheMap(id))
            .then(() => this._reallySetMarkers(this.props.markers));
    }

    private _setMarkers(markers: Markable[]): void {
        GoogleSDK.load().then(() => this._reallySetMarkers(markers));
    }

    private _reallyLoadTheMap(id: string): void {
        const options = Object.assign({}, this.props, {
            mapTypeId: this.props.mapTypeId || google.maps.MapTypeId.ROADMAP,
            center: this.props.center || configuration.google.maps.defaults.center,
            zoom: this.props.zoom || configuration.google.maps.defaults.zoom,
            mapTypeControl: this.props.mapTypeControl || false
        });

        this._map = new google.maps.Map(document.getElementById(id), options);
    }

    private _reallySetMarkers(markers: Markable[]): void {
        markers.forEach(marker => new google.maps.Marker({
            map: this._map,
            title: marker.title,
            position: new google.maps.LatLng(marker.position.lat, marker.position.lon)
        }));
    }

    render(): JSX.Element {
        const id = `MapComponent${new Date().getMilliseconds()}`;
        const style = {
            width: '100%',
            height: '200px',
            lineHeight: '200px',
            textAlign: 'center',
            color: 'white'
        };
        this._loadTheMap(id);
        return (<div id={id} style={style}></div>);
    }
}

import*as React from'React'；
从“../google”导入{MapComponent，Markable}；
从“/Store.model”导入{Store}；
导出接口存储方法{
门店：门店[]；
}
函数mapStoreToMarker（存储：存储）：可标记{
返回{
标题：store.id，
位置：store.geoLoc
};
}
导出类StoresMapComponent扩展React.Component{
shouldComponentUpdate（nextrops:storesApprops）：布尔值{
return nextrops.stores！==this.props.stores；
}
render（）：JSX.Element{
const markers=this.props.stores.map（mapStoreToMarker）；
返回（）；
}
}

map.tsx

import * as React from 'react';
import { MapComponent, Markable } from '../google';
import { Store } from './store.model';

export interface StoresMapProps {
    stores: Store[];
}

function mapStoreToMarker(store: Store): Markable {
    return {
        title: store.id,
        position: store.geoLoc
    };
}

export class StoresMapComponent extends React.Component<StoresMapProps, void> {
    shouldComponentUpdate(nextProps: StoresMapProps): boolean {
        return nextProps.stores !== this.props.stores;
    }

    render(): JSX.Element {
        const markers = this.props.stores.map(mapStoreToMarker);
        return (<MapComponent center={{ lat: 39.709396, lng: -105.145465 }} zoom={8} markers={markers} />);
    }
}

import * as React from 'react';
import configuration from '../../configuration';
import { GoogleSDK } from './sdk';

export interface Markable {
    position: { lat: number; lon: number; };
    title: string;
}

export interface MapComponentProps extends google.maps.MapOptions {
    markers?: Markable[];
}

export class MapComponent extends React.Component<MapComponentProps, void> {
    private _map: google.maps.Map;
    private _loadTheMap(id: string): void {
        GoogleSDK.load()
            .then(() => this._reallyLoadTheMap(id))
            .then(() => this._reallySetMarkers(this.props.markers));
    }

    private _setMarkers(markers: Markable[]): void {
        GoogleSDK.load().then(() => this._reallySetMarkers(markers));
    }

    private _reallyLoadTheMap(id: string): void {
        const options = Object.assign({}, this.props, {
            mapTypeId: this.props.mapTypeId || google.maps.MapTypeId.ROADMAP,
            center: this.props.center || configuration.google.maps.defaults.center,
            zoom: this.props.zoom || configuration.google.maps.defaults.zoom,
            mapTypeControl: this.props.mapTypeControl || false
        });

        this._map = new google.maps.Map(document.getElementById(id), options);
    }

    private _reallySetMarkers(markers: Markable[]): void {
        markers.forEach(marker => new google.maps.Marker({
            map: this._map,
            title: marker.title,
            position: new google.maps.LatLng(marker.position.lat, marker.position.lon)
        }));
    }

    render(): JSX.Element {
        const id = `MapComponent${new Date().getMilliseconds()}`;
        const style = {
            width: '100%',
            height: '200px',
            lineHeight: '200px',
            textAlign: 'center',
            color: 'white'
        };
        this._loadTheMap(id);
        return (<div id={id} style={style}></div>);
    }
}

import*as React from'React'；
从“../../configuration”导入配置；
从“/sdk”导入{GoogleSDK}；
可标记的导出接口{
位置：{lat:number；lon:number；}；
标题：字符串；
}
导出接口MapComponentProps扩展了google.maps.MapOptions{
标记？：可标记[]；
}
导出类MapComponent扩展React.Component{
私有地图：google.maps.map；
private\u loadTheMap（id:string）：void{
GoogleSDK.load（）
.然后（（）=>这个._真正加载地图（id））
.然后（（）=>这个._reallySetMarkers（这个.props.markers））；
}
private _setMarkers（markers:Markable[]）：void{
load（）。然后（（）=>这个。_reallySetMarkers（markers））；
}
private\u reallyLoadTheMap（id:string）：void{
const options=Object.assign（{}，this.props{
mapTypeId:this.props.mapTypeId | | | google.maps.mapTypeId.ROADMAP，
中心：this.props.center | | configuration.google.maps.defaults.center，
zoom:this.props.zoom | | | configuration.google.maps.defaults.zoom，
mapTypeControl:this.props.mapTypeControl | | false
});
this.\u map=new google.maps.map（document.getElementById（id），options）；
}
private _reallySetMarkers（markers:Markable[]）：void{
markers.forEach（marker=>new google.maps.marker({
地图：这个，
标题：marker.title，
位置：新的google.maps.LatLng（marker.position.lat，marker.position.lon）
}));
}
render（）：JSX.Element{
const id=`MapComponent${new Date（）.getmillizes（）}`；
常量样式={
宽度：“100%”，
高度：“200px”，
线宽：“200px”，
textAlign:'中心'，
颜色：“白色”
};
这个。加载地图（id）；
返回（）；
}
}