Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PolyLine组件使用showDir=true后不显示方向 #296

Open
hippowc opened this issue Feb 17, 2023 · 6 comments
Open

PolyLine组件使用showDir=true后不显示方向 #296

hippowc opened this issue Feb 17, 2023 · 6 comments

Comments

@hippowc
Copy link

hippowc commented Feb 17, 2023

使用PolyLine组件的showDir后为啥展示不出路径的方向
版本:"@uiw/react-amap": "^4.5.2"
image
image
image

@hippowc
Copy link
Author

hippowc commented Feb 22, 2023

why?

@jaywcjlove
Copy link
Member

@hippowc 不知道,使用 CodeSanbox 将你的示例错误重现出来,我帮你看看

@hippowc
Copy link
Author

hippowc commented Feb 22, 2023

image
相关代码:

import {
  Map,
  APILoader,
  ScaleControl,
  ToolBarControl,
  ControlBarControl,
  Geolocation,
  Polyline,
  Marker
} from "@uiw/react-amap";
import "./styles.css";

const testStyle = {
  showDir: true,
  strokeColor: "#3bcbb2",
  strokeWeight: 7,
  lineJoin: 'round',
  strokeOpacity: 1
}

const path = [[
  121.4559478760,
  31.3117923737
],
[
  121.45593,
  31.31182
],
[
  121.455926,
  31.311824
],
[
  121.455406,
  31.311754
],
[
  121.45516,
  31.313103
],
[
  121.454357,
  31.313572
],
[
  121.452895,
  31.313456
],
[
  121.452895,
  31.313456
],
[
  121.4528961182,
  31.3134555817
],
[
  121.4528961182,
  31.3134555817
]];

function Demo() {
  return (
    <div style={{ width: "100%", height: "300px" }}>
      <Map zoom={4} center={[121.4559478760,31.3117923737]}>
        <ScaleControl offset={[16, 30]} position="LB" />
        <ToolBarControl offset={[16, 10]} position="RB" />
        <ControlBarControl offset={[16, 180]} position="RB" />
        <Geolocation
          maximumAge={100000}
          borderRadius="5px"
          position="RB"
          offset={[16, 80]}
          zoomToAccuracy={true}
          showCircle={true}
        />
        <Polyline
          path={path}
          {...testStyle}
        />
        <Marker
          title="北京市"
          // offset={new AMap.Pixel(-13, -30)}
          label={{
            // 设置文本标注偏移量
            // offset: new AMap.Pixel(20, 20),
            // 设置文本标注内容
            // content: ,
            // 设置文本标注方位
            direction: "right"
          }}
          position={[121.4559478760, 31.3117923737]}
        >
          <div style={{ backgroundColor: "#333", width: 200, color: "white" }}>
            我是 marker 的 label 标签
          </div>
        </Marker>
      </Map>
      <Map>
        {({ AMap, map, container }) => {
          return;
        }}
      </Map>
    </div>
  );
}

export default function App() {
  return (
    <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
      <Demo />
    </APILoader>
  );
}

@hippowc
Copy link
Author

hippowc commented Feb 22, 2023

我打开你这个链接看到的和你不一样,难道是浏览器的问题?我是chrome:版本 109.0.5414.119(正式版本) (x86_64)
image

@jaywcjlove
Copy link
Member

image

你看一下官方示例,是否存在兼容问题

@hippowc

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants