文章/答案/技术大牛

发布

社区首页 >问答首页 >React中的旋转标记-传单v4 -React类型记录

问React中的旋转标记-传单v4 -React类型记录
EN

Stack Overflow用户

提问于 2022-11-08 23:18:48

回答 1查看 48关注 0票数 0

我在试图旋转标记在反应传单上有困难。

我已经看到了一些例子，它是用一个较旧版本的反应传单使用传单旋转标记。见下文..。已经尝试使用这两个示例而没有任何结果，也尝试过用transform: rotate(18deg);覆盖css，但这也不起作用。如有任何帮助，将不胜感激。

package.json：

  "dependencies": {
     ...
    "@types/leaflet": "^1.9.0",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "leaflet": "^1.9.2",
    "leaflet-rotatedmarker": "^0.2.0",,
    "react-leaflet": "^4.1.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2"
  },

结果：

import 'leaflet-rotatedmarker';
import L, { LatLngBoundsLiteral, LatLngBounds, Icon, LatLng, map } from "leaflet";
...
let m = L.marker([51.505, -0.09]).addTo(map);
m.setRotationAngle(180);

使用旧的react传单版本的工作示例：码箱堆栈过流问题

leaflet

react-leaflet

react-leaflet-v4

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-11-11 11:01:40

添加传单旋转标记：npm源

如果您使用的是打字本，请使用：

yarn add @types/leaflet-rotatedmarker


import { MapContainer, Marker, TileLayer, Tooltip } from "react-leaflet";
import 'leaflet-rotatedmarker';
....
              //add rotationAngle
              <Marker
                icon={myIcon}
                key={data.key}
                position={[data.latitude, data.longitude]}
                rotationAngle={data.angle}
              >
              </Marker>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74368250

复制

相似问题

问React中的旋转标记-传单v4 -React类型记录
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React中的旋转标记-传单v4 -React类型记录EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React中的旋转标记-传单v4 -React类型记录
EN