CustomOverlay 的 offset

[Lpbzzz]

http://jser.wang/bmap/examples/overlay/custom 这个例子中，offset 并不能起到作用

[ye-carol]

如果你是想给自定义覆盖物定位的话可以在css设置transform: translate(..., ...)属性

[Lpbzzz]

如果你是想给自定义覆盖物定位的话可以在css设置transform: translate(..., ...)属性

其实我觉得自定义覆盖物的显示逻辑应该是 point制定的位置作为自定义覆盖物的坐上顶点或者也可通过offset设置偏移。不然的话，用各种css控制位置确实可以，但是会遮盖下层的覆盖物。比如线。

[Lpbzzz]

如果你是想给自定义覆盖物定位的话可以在css设置transform: translate(..., ...)属性

oo transform 确实可以。。

[ye-carol]

如果point指定的位置是坐上顶点的位置当然好，但现在point的位置是自定义覆盖物中心点的位置，offset设置偏移只能是px而不能是百分比，所以暂时只能用css来控制了

[ye-carol]

现在有这样一个问题，我把Label单独拿出来用，而不是放在Marker里面，Label的层级会比CustomOverlay的层级要高导致CustomOverlay会覆盖不住Label里面的内容

[Lpbzzz]

刚刚看错了 ，还是会遮挡下层的线...

[Lpbzzz]

现在有这样一个问题，我把Label单独拿出来用，而不是放在Marker里面，Label的层级会比CustomOverlay的层级要高导致CustomOverlay会覆盖不住Label里面的内容

我还没这么用..感觉好多东西要折中

[Lpbzzz]

现在有这样一个问题，我把Label单独拿出来用，而不是放在Marker里面，Label的层级会比CustomOverlay的层级要高导致CustomOverlay会覆盖不住Label里面的内容

还有，你更新点的位置的时候是怎么让它渲染的呢。。我是重置了一次地图中心点

[ye-carol]

CustomOverlay只能重置中心点，要不然位置更新不了

[JserWang]

@Lpbzzz @ye-carol 嗨，首先感谢二位的使用，看到关于

更新点的位置的时候是怎么让它渲染的呢。

的问题讨论，此处是个bug，理论上只需要修改自定义覆盖物的中心点位置即可。 该问题已于v1.0.5版本，后面附修改后的变更方式。 如果在使用中还有其他问题或者痛点，欢迎随时提issue。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'antd';
import {
  Map,
  Overlay,
  CustomOverlay as Custom,
  Base,
} from 'rc-bmap';

const { Point } = Base;

@Custom
class CustomOverlay extends Component {
  render() {
    return (
      <div>这是一个自定义图层</div>
    );
  }
}

class Example extends React.Component {
  state = {
    lng: "116.407845",
    lat: "39.914101"
  }

  handleChange = () => {
    this.setState({
      lng: "116.407845",
      lat: "39.924101"
    })
  }

  render() {
    return (
      <div style={{ height: '90vh' }}>
        <Map
          ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv"
          zoom={15}
          scrollWheelZoom
        >
          <Point name="center" lng="116.3964" lat="39.9093" />
          <CustomOverlay>
            <Point lng={this.state.lng} lat={this.state.lat} />
          </CustomOverlay>
        </Map>
        <Button onClick={this.handleChange}>改变位置</Button>
      </div>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('root'),
);

[Lpbzzz]

@JserWang 谢谢作者大佬回复。我和我的同事一致觉得rc-bmap的【一切皆组件】的做法十分棒！能有很多手段去进行优化加载。修复的这个bug也是很常用的一个场景。不知您对 CustomOverlay 这个渲染位置有什么想法呢？因为我本身是想写一个自定义的infowindow，在这里面传入个Antdesign的组件显得样式会更好看些。如果CustomOverlay 的定位位置是其中心的话，会遮住本身的点位。不知您有何建议。

[JserWang]

@Lpbzzz 如果infowindow是固定大小的话，能否通过offset的设置对其进行定位？

[Lpbzzz]

@JserWang CustomOverlay 的offset 是不生效的

[JserWang]

@Lpbzzz Custom overlay 不支持 offset 是个糟糕的体验，我在1.0.5版本中为其增加了offset属性，新版本中可以通过Size 组件为其赋值

const { Size } = Base;
<CustomOverlay>
  <Size name="offset" width="50" height="50" />
</CustomOverlay>

[Lpbzzz]

@JserWang 十分感谢！