该楼层疑似违规已被系统折叠 隐藏此楼查看此楼
react高德地图的话组件可以会有些缺失,所以我们需要参考官网的Geocoder 的引入做参考,目前突然说需要高德地图默认卫星,react-amap,压根找不到相应的demo,所以自己花时间研究了一下
首先参考GeoCoder的写法,我们整个写入默认卫星都要做在mapevens里面,
const Map = ReactAMAP.Map
class MyApp extends React.Component{
constructor() {
super();
const _this = this;
this.state = {
status: {
zoomEnable: true
},
zoomEnable: false, // 这个配置会被 status 中的 zoomEnable 覆盖,请不要这样同时配置两者
tip: '可以缩放'
};
this.mapEvents = {
created(map){
_this.map = map;
// _this.map.setDefaultLayer(new AMap.TileLayer.Satellite());
_this.map.setLayers([new AMap.TileLayer.Satellite()]);
}
};
this.toggleZoom = this.toggleZoom.bind(this);
}
toggleZoom() {
const nextEnable = !this.state.status.zoomEnable;
const tip = nextEnable ? '缩放已启用' : '缩放已禁用' ;
this.setState({
status: {
zoomEnable: nextEnable
},
tip
});
}
render(){
return
plugins={['ToolBar']}
status={ this.state.status }
zoomEnable={this.state.zoomEnable}
events={this.mapEvents}
/>
Toggle Zoom Enable
{this.state.tip}
}
}
ReactDOM.render(, document.querySelector('#app'))
由于setDefaultLayer 已经废弃,所以采用调用setLayers,这样JS能实现的几乎在mapevens里面就能灵活调用