地图缩放级别设置失败，鼠标缩放后设置zoom={this.state.center.z}失效！

[wk1048387321]

业务需求，点击标注点地图以标注点为中心并设置zoom={17}，第一次点击成功。然后使用鼠标缩放地图后再点击其它标注点，只是把标注点作为地图显示中心并没有设置地图缩放级别。（setZoom={{zoom: this.state.center.z}}地图原生属性设置无效）

this.state = { center: {x: 121.502287, y: 31.24398, z: 11} }

<Map center={{lng: this.state.center.x, lat: this.state.center.y}} zoom={this.state.center.z}

handleSelected(x, y, z){ this.setState({center: {x: x, y: y, z: z}}); }

[Junior2Ran]

<Map center={{lng:x, lat:y}}>通过props传入的center属性只会在地图初始化时生效。

如果要在初始化后手动改变地图缩放级别，可以调用对应的方法，比如

handleSelected(x, y, z){
    this.props.map.panTo({lng:x, lat:y});
    this.props.map.setZoom(z);
}

或者是

handleSelected(x, y, z){
    this.props.map.setViewport({center:{lng:x, lat:y}, zoom: z});
}

如果还有不懂的，可以仔细看一下地图API

[wk1048387321]

import {Map, Marker, NavigationControl} from 'react-bmap';

constructor(props){ super(props); console.log(this) }

this.props 空的，要怎么才能获取到Map呢？

[Junior2Ran]

<Map center={{lng:x, lat:y}}>
    <YourMapComponent />
</Map>

这种情况下，<Map>的子组件的props里会获得map对象，通过this.props.map来调用。

或者你可以通过react的ref拿到map对象，方法很多，不再一一举例。

componentDidMount (){
    console.log(this.refs.map)
}

<Map ref="map" center={{lng:x, lat:y}}>