针对 Overlay 相关组件增加、删除遇见的一些问题

[onlyling]

需求说明

1. 在地图上点击一下添加一个 Marker，点击已存在的 Marker 删除它。
2. 两个 Marker 用线连接。

基础代码

import React from "react";
import { View } from "react-native";
import { MapView, Overlay } from "react-native-baidu-map";

const getPointKey = l => `${l.latitude}_${l.longitude}`;

class Demo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      markLocations: []
    };
  }

  onMapClick = e => {
    this.setState({
      markLocations: this.state.markLocations.concat(e)
    });
  };

  onMarkerClick = ({ position }) => {
    this.setState({
      markLocations: this.state.markLocations.filter(
        l =>
          l.latitude !== position.latitude || l.longitude !== position.longitude
      )
    });
  };

  render() {
    const { markLocations } = this.state;

    return (
      <MapView
        style={{ flex: 1 }}
        onMapClick={this.onMapClick}
        onMarkerClick={this.onMarkerClick}
      >
        {markLocations.map(_location => {
          return (
            <Overlay.Marker
              key={getPointKey(_location)}
              location={_location}
              icon={require("./img/marker-drag.png")}
            />
          );
        })}

        {/* 如果这里不套一个 View，初次打开页面会报错，大概是 null 不能是子组件 */}
        {/* 优化一下？ */}
        <View>
          {markLocations.length >= 2 ? (
            <Overlay.Polyline
              lineWidth={6}
              strokeColor="FF727cf5"
              points={markLocations}
            />
          ) : null}
        </View>
      </MapView>
    );
  }
}

问题/反馈

只有 Marker

添加/删除看起来没有问题

Marker 和 Polyline 共存

一直添加显示正常。

删除会有问题：

问题一：

1. 在地图上点击四下，有四个 Marker，两个之间按顺序通过 Polyline 连接起来；
2. 删除最后一个 Marker 地图上会显示倒数第二个 Marker 消失，最后一个保留，Polyline 显示正常，后面三个点连起来的；
3. 删除地图上显示的倒数第一个点（逻辑数据上倒数第二个），正确消失，上面最后一个点依旧显示，Polyline 显示正常，

问题二：

1. 在地图上点击四下，有四个 Marker，两个之间按顺序通过 Polyline 连接起来；
2. 删除倒数第二个点，所有的 Marker 都还在，Polyline 全部消失；
3. 再次点击添加 Marker 能添加，Polyline 不再显示；

问题三：

偶尔在删除 Marker 的时候回触发红屏保存。

问题四：

const getIntermediatePoint = (a, b) => {
  return {
    longitude: (a.longitude + b.longitude) / 2,
    latitude: (a.latitude + b.latitude) / 2,
  };
};

<View>
  {markLocations.length >= 2 ? (
    <Overlay.Polyline
      lineWidth={6}
      strokeColor="FF727cf5"
      points={markLocations}
    />
  ) : null}
</View>

{/* 替换成下面的 */}
<View>
  {markLocations.length >= 2
    ? markLocations.map((_location, i) => {
        if (i === 0) {
          return null;
        }

        return (
          <Overlay.Marker
            key={getPointKey(_location)}
            location={getIntermediatePoint(_location, markLocations[i - 1])}
            icon={require('../../assets/bmap/marker1.png')}
          />
        );
      })
    : null}
</View>

同一个种类的 Marker 显示也有问题，可能中间某个就不见了。

设备

• 手机：魅族 16th
• Android 版本：8.1.0
• Flyme 版本：8.0.0.0A
• React Native: 0.61.5
• 开发机器：macOS Catalina 10.15.3

[Raintdk]

删除 Marker 是直接通过 改变 state 中的 markLocations 改变的么

[onlyling]

删除 Marker 是直接通过 改变 state 中的 markLocations 改变的么

是的。

[lovebing]

最新版已修复这些问题 注意 Overlay 不要用 View 包裹，Polyline 的属性有所调整

{markLocations.length >= 2 ? (
    <Overlay.Polyline
        stroke={width: 6, {color: 'FF727cf5'}}
        points={markLocations}
      />
) : <View />}