0

我的应用程序通过 AWS IoT 有实时数据流。数据包括我想在谷歌地图上绘制的纬度/经度坐标。我目前正在使用 google-map-react，但如果这个库无法处理我需要的内容，我会向其他库开放。

这是我需要的：

  1. 如果没有数据点，我希望地图是整个世界的视图。如果无法实现，我想展示一个地区（美国、欧洲等）。
  2. 当佛罗里达州迈阿密的数据点带有纬度/经度坐标时，我希望地图能够自动调整，以便放大迈阿密市。
  3. 当另一个数据点带有华盛顿特区的纬度/经度坐标时，我希望地图自动缩小，以便现在在地图上可以看到两个标记。

工作原理- 此时，我可以让标记/点出现在地图上。

什么不起作用- 当新标记从 AWS IoT 流入时，我无法让地图自动重新调整。当不存在标记/点时，我也无法让地图显示整个世界的视图。

关于如何解决这些问题的任何想法？任何帮助，将不胜感激！

这是我实现的代码：

import GoogleMapReact from 'google-map-react';

class Dashboard extends React.Component {
    state = {              
        mapData: [],       
        mapZoom: 1,
        // I was hoping the following coords would give me a world view
        mapCenter: [0.00000000001, 0.00000000001],    
    }

    // Fit map to its bounds after the api is loaded
    const apiIsLoaded = (map, maps, places) => {
     map.setOptions({mapTypeControl: false, minZoom: 1});
     const bounds = getMapBounds(map, maps, places);
     map.fitBounds(bounds);
     bindResizeListener(map, maps, bounds);
    };

    // Return map bounds based on list of places
    const getMapBounds = (map, maps, places) => {
      const bounds = new maps.LatLngBounds();

      places.forEach((place) => {
       bounds.extend(new maps.LatLng(
        place.geometry.location.lat,
        place.geometry.location.lng,
       ));
      });
      return bounds;
    };

    // Re-center map when resizing the window
    const bindResizeListener = (map, maps, bounds) => {
     maps.event.addDomListenerOnce(map, 'idle', () => {
      maps.event.addDomListener(window, 'resize', () => {
       map.fitBounds(bounds);
      });
     });
    };

    render() {
     <div style={{ width: '100%', height: '100%'}}>
       <GoogleMapReact
         bootstrapURLKeys={{ key: 'abcd...' }}          
         resetBoundsOnResize={true} 
         zoom={this.state.mapZoom}
         center={this.state.mapCenter}                                                                                                                      
         yesIWantToUseGoogleMapApiInternals
         onGoogleApiLoaded={({ map, maps }) => this.apiIsLoaded(map, maps, this.state.mapData)}
       >   
         {this.state.mapData.map((place) => (
           <Marker
             key={place.uuid}
             text={place.city + ', ' + place.state}
             lat={place.location_lat}
             lng={place.location_lon}
           />
         ))}  
       </GoogleMapReact> 
     </div>
    }
}
4

0 回答 0