react-google-maps：如何使用fitBounds，panBy，panTo，panToBounds公共API？

根據React Google Maps library，你可以從ref對象調用這四個方法。react-google-maps：如何使用fitBounds，panBy，panTo，panToBounds公共API？

什麼似乎不可思議，就是這些方法都應該接受兩個參數，一個地圖實例和其他參數，像這樣：

fitBounds(map, args) { return map.fitBounds(...args); }

但是，調用fitBounds時（）這樣，什麼都不會發生在地圖，沒有邊界被改變，沒有錯誤被拋出。這是我所構成的組件的方式，呼籲fitBounds在componentDidUpdate：

import React from 'react' 
import { withGoogleMap, GoogleMap, InfoWindow, Marker, OverlayView } from 'react-google-maps' 
import InfoBox from 'react-google-maps/lib/addons/InfoBox' 
import map from 'lodash/map' 

// Higher-Order Component 
const AllocatedPlacesMap = withGoogleMap(props => (
    <GoogleMap 
    center={props.center} 
    defaultZoom={4} 
    options={{ scrollwheel: false, minZoom: 3, maxZoom: 15 }} 
    onCenterChanged={props.onCenterChanged} 
    ref={props.onMapMounted}> 
    {props.markers.map((marker, index) => (
     <Marker 
     key={index} 
     position={marker.position} 
     /> 
    ))} 
    </GoogleMap> 
)); 

class Map extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    }; 
    } 

    getCenter =() => { 
    this._bounds = new google.maps.LatLngBounds(); 

    this.props.markers.forEach((marker, index) => { 
     const position = new google.maps.LatLng(marker.lat, marker.lng); 
     this._bounds.extend(position); 
    }); 

    return this._bounds.getCenter(); 
    } 

    componentDidUpdate() { 
    this._map.fitBounds(this._map, this._bounds); 
    } 

    handleMapMounted = (map) => { 
    this._map = map; 
    } 

    render() { 
    return (
     <div className="allocated-places"> 
     <AllocatedPlacesMap 
      containerElement={ 
      <div style={{ height: `100%` }} /> 
      } 
      mapElement={ 
      <div style={{ height: `100%` }} /> 
      } 
      center={this.getCenter()} 
      markers={props.markers} 
      onMapMounted={this.handleMapMounted} 
     /> 
     </div> 
    ) 
    } 
} 

export default Map;

的是什麼叫fitBounds（）在這種情況下，正確的方法你知道嗎？文件和實例在這方面似乎缺乏。

來源

2017-06-11 Danny H

fitBounds（）不再需要地圖實例作爲第一個參數。這個bug也是在圖書館的第9版中修復的。 –

看看函數定義fitBounds(map, args) { return map.fitBounds(...args); }我們可以看到spread operator適用於args。這表明args應該是一個數組。

所以，在你的代碼的第二個參數應該是一個數組類型：

this._map.fitBounds(this._map, [this._bounds]);

您還可以將被轉化爲地圖Javascript的第二個可選參數padding數組的第二個元素API fitBound()方法。

this._map.fitBounds(this._map, [this._bounds, 100]);

希望這有助於！

來源

2017-06-13 11:11:51 xomena

謝謝！但''this._bounds'''是一個對象，所以擴展運算符應該工作，而不是將它包裝在一個數組中。我試圖包裝它只是爲了測試，但沒有發生，沒有錯誤，地圖不適合標記。 –

如果傳播對象，則將此對象的迭代屬性作爲map.fitBounds（）的參數。但根據[documentation]（https://developers.google.com/maps/documentation/javascript/reference#Map），第一個參數必須是整個LatLngBounds或LatLngBoundsLiteral。你可以嘗試在這個函數調用中放置斷點並檢查this._bounds對象嗎？ – xomena

你有初始渲染的這個問題嗎？該文檔說：「更新發生後立即調用componentDidUpdate（），而不是爲初始渲染調用此方法。」 https://facebook.github.io/react/docs/react-component.html#componentdidupdate – xomena

這就是你怎麼罵的啞劇，並與fitBounds反應映射裁判

this.map.panTo({ 
    lat:e.latLng.lat(), lng: e.latLng.lng() 
}) 
const bounds = new google.maps.LatLngBounds() 
bounds.extend({ 
    lat:e.latLng.lat(), lng: e.latLng.lng() 
}) 
this.map.fitBounds(bounds)

來源

2017-09-26 20:59:23 user3882878

react-google-maps：如何使用fitBounds，panBy，panTo，panToBounds公共API？

回答

相關問題