Google maps 反应列表+；映射组件

我在一个react项目中工作，我想要实现的是一个项目列表，旁边有谷歌地图。我花了很多时间研究它，寻找最好的方法，我发现了很多例子，但它们并没有很好的表现。 另外，我希望当你在列表中的一个项目上移动时，地图中相应项目的标记会改变颜色或类似的东西，因此我希望将标记与列表中的项目同步

下面是我的地图组件，让您知道我目前正在使用哪些库：

import React from 'react';
import GoogleMaps from 'google-maps-api';
import MapConfig from 'config/maps.json';
import mapStyles from './map.styles';

const MapWithKey = GoogleMaps(MapConfig.API_KEY);

class Map extends React.Component {

    render() {
        const items = this.props.items;
        MapWithKey().then(( maps ) => {
            const map = new maps.Map(document.getElementById('js-map'), {
                center: {lat: -34.397, lng: 150.644},
                scrollwheel: false,
                zoom: 8,
                mapTypeControl: false,
                streetViewControl: false
            });

            for ( let item of items ) {
                new maps.Marker({
                    position: new maps.LatLng(item.latitude, item.longitude),
                    map: map
                });
            }
        });


        return(
            <div style={mapStyles} id="js-map">{this.props.children}</div>
        );
    }
}

export default Map;

从“React”导入React；
从“谷歌地图api”导入谷歌地图；
从'config/maps.json'导入MapConfig；
从“/map.styles”导入地图样式；
const MapWithKey=GoogleMaps（MapConfig.API_KEY）；
类映射扩展了React.Component{
render（）{
const items=this.props.items；
MapWithKey（）。然后（（映射）=>{
const map=new maps.map（document.getElementById（'js-map'）{
中心：{纬度：-34.397，液化天然气：150.644}，
滚轮：错误，
缩放：8，
mapTypeControl:false，
街景控制：错误
});
对于（让项目中的项目）{
新地图，标记({
位置：新地图。纬度（项目。纬度，项目。经度），
地图：地图
});
}
});
返回(
{this.props.children}
);
}
}
导出默认地图；

我注意到在开发过程中，我无法在状态中添加标记，因为每次我添加一个标记时，组件都会再次重新加载

您是否知道一种好的方法，并以一种好的方式构造组件？ 非常感谢您的帮助

提前谢谢。

听起来像是一份适合你的工作

此生命周期方法允许您决定是否应在每次更新状态或道具时重新呈现组件

shouldComponentUpdate() {
  return false;
}

现在，您可以安全地将标记存储在

this.state

中，并使用命令映射API更新它们，而不用担心组件试图重新渲染

还值得一提的是，

shouldComponentUpdate

不会影响初始渲染，您仍然可以使用强制更新来完成初始渲染

您可能还想考虑重构组件以遵循一些最佳实践。您可以使用带有回调的

ref

属性来获取对DOM元素的引用，而不需要

id

return(
  <div style={mapStyles} ref={containerMounted}>{this.props.children}</div>
);

最后，重要的是，当道具改变时，你的标记会重新渲染。以前，我们可以在

render

函数中执行此操作。您看到性能差的部分原因是因为每次调用render时都创建了新的标记。相反，您需要移动现有的

// create the markers before initial render
componentWillMount() {
  this.createMarkers(this.props.items);
}

// recreate the markers only when props changes
componentWillReceiveProps(nextProps) {
  if(nextProps.items === this.props.items) return;
  this.removeMarkers(this.state.markers);
  this.createMarkers(nextProps.items);
}

// remove a list of markers from the map
removeMarkers(markers) {
  markers.forEach(m => m.setMap(null));
}

// create a list of markers on the current map
createMarkers(items) {
  const markers = items.map(item => {
    return new maps.Marker({
      position: new maps.LatLng(item.latitude, item.longitude),
      map: this.state.map
    });
  });
}

听起来像是一份适合你的工作

此生命周期方法允许您决定是否应在每次更新状态或道具时重新呈现组件

shouldComponentUpdate() {
  return false;
}

现在，您可以安全地将标记存储在

this.state

中，并使用命令映射API更新它们，而不用担心组件试图重新渲染

还值得一提的是，

shouldComponentUpdate

不会影响初始渲染，您仍然可以使用强制更新来完成初始渲染

您可能还想考虑重构组件以遵循一些最佳实践。您可以使用带有回调的

ref

属性来获取对DOM元素的引用，而不需要

id

return(
  <div style={mapStyles} ref={containerMounted}>{this.props.children}</div>
);

最后，重要的是，当道具改变时，你的标记会重新渲染。以前，我们可以在

render

函数中执行此操作。您看到性能差的部分原因是因为每次调用render时都创建了新的标记。相反，您需要移动现有的

// create the markers before initial render
componentWillMount() {
  this.createMarkers(this.props.items);
}

// recreate the markers only when props changes
componentWillReceiveProps(nextProps) {
  if(nextProps.items === this.props.items) return;
  this.removeMarkers(this.state.markers);
  this.createMarkers(nextProps.items);
}

// remove a list of markers from the map
removeMarkers(markers) {
  markers.forEach(m => m.setMap(null));
}

// create a list of markers on the current map
createMarkers(items) {
  const markers = items.map(item => {
    return new maps.Marker({
      position: new maps.LatLng(item.latitude, item.longitude),
      map: this.state.map
    });
  });
}

---

你太棒了！！！这么好的回答，只有一件事。。。在componentWillReceiveProps中，您使用的是this.state.markers，之前没有设置它，我猜是在createMarkers中创建markers集合，对吗？还有另一件事，maps object，从GMAP返回承诺的对象，只能在containerMounted中访问，我试图将其设置为类的状态或属性，但由于它是一个承诺，因此在需要时不可用。是的，您可能需要使用

getInitialState

方法返回标记的初始版本。是的，如果您想使用

贴图

以及

贴图

对象，您需要以相同的方式公开它。我尝试将其公开给状态，但由于这是一个承诺，它在第一次渲染之后出现，因此未定义：（也在组件上公开承诺，然后你可以为它创建多个侦听器。你太棒了！！！这么好的答案，只有一件事…在componentWillReceiveProps中，你正在使用这个.state.markers。如果不事先设置它，我想你应该在CreateMarks中创建一个标记集合，对吗？还有另一件事，maps object，一个从GMaps返回的承诺只能在containerMounted中访问，我尝试将其设置为state或类的属性，但由于它是一个承诺，在需要时不可用是的，您可能需要一个

getInitialState

方法来返回标记的初始版本。是的，如果您想使用

maps

作为以及

map

对象，您需要以相同的方式公开它。我尝试将它公开到状态，但由于它是一个承诺，它在第一次渲染之后出现，因此它是未定义的：（也公开组件上的承诺，然后您可以为它创建多个侦听器。