在项目中有一个需要在地图上显示物体定位以及分布热力图的需求,导师选择使用高德地图进行实现。对应的package为React-amap。
记录一下在项目中遇到的几个问题以及解决方案:
- 自定义Markers外观,
// 标记杆塔的图片样式
style = {
position: 'relative',
backgroundColor: 'white',
color: '#fff',
border: '0px solid #fff',
background: `url(${circle})`, // 通过import引入的本地图片
// background: `url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/map-marker-icon.png')`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
width: '7px',
height: '7px',
top: '28px',
left: '7.25px',
};
renderMarkerLayout = (extData) =>{
return (
<div>
<Tooltip title={extData.parent + extData.index + '号杆塔' }>
<div style={this.style}> </div>
</Tooltip>
</div>
)
};
<Markers markers={} render={ this.renderMarkerLayout } />
- 地图缩放到一定的比例之后显示细节信息,这个问题现在还没有解决。本来想的是给地图添加events当缩放的时候改变state使组件重新渲染,但是最终发现改变state之后地图并不会刷新,可能是地图的性能优化机制导致的吧???