react 逆地理 高德地图_react高德地图默认卫星图设置

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

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里面就能灵活调用