关于Map组件自定义地图没有生效问题

[yan0727]

作者你好，我在使用Map组件过程中，添加了defaultCurso参数，并且在高德开发平台已经自定义了地图了，添加参数后，没生效？请教一下是什么问题

[jaywcjlove]

@yan0727 不知道你怎么写的，无法解决你的问题

[yan0727]

@jaywcjlove我是直接在map组件里面添加参数 <Map defaultCursor="amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86" zoom={20} />

[yan0727]

@jaywcjlove
<Map defaultCursor="amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86" zoom={20} />

这样写对吗

[jaywcjlove]

@yan0727 https://codesandbox.io/ 你可以用它提供一个实例，你这个参数 少一个 r, defaultCursor 应该是它吧。

[yan0727]

@jaywcjlove 我加了这个参数了，就是没起作用

[jaywcjlove]

@yan0727 你可以通过 codesandbox 提供一个不起作用的实例，我可以帮你看看

[yan0727]

@jaywcjlove https://codesandbox.io/s/priceless-shtern-v2dhl?file=/App.js麻烦您看一下

[jaywcjlove]

@yan0727 根据官方实例通过下面两种方法都有效 https://lbs.amap.com/api/jsapi-v2/example/map/set-mouse-style-on-the-map/

不止为何在 codesandbox 中无效。 但是你传的值也是有问题的吧 ，defaultCursor="amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86" 这个值不知道是个啥呢。

import React from "react";
import { Map, APILoader } from "@uiw/react-amap";

function Demo() {
  return (
    <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
      <div style={{ width: "100%", height: 700 }}>
        <Map defaultCursor="crosshair">
          {({ AMap, map, container }) => {
            console.log("map", map);
            if (map) {
              map.setDefaultCursor("crosshair");
            }
            return;
          }}
        </Map>
      </div>
    </APILoader>
  );
}

export default Demo;

diff 下面两种方法任选一种

import React from "react";
import { Map, APILoader } from "@uiw/react-amap";

function Demo() {
  return (
    <APILoader akay="a7a90e05a37d3f6bf76d4a9032fc9129">
      <div style={{ width: "100%", height: 700 }}>
        <Map
+           defaultCursor="crosshair"
        >
          {({ AMap, map, container }) => {
            console.log("map", map);
            if (map) {
+              map.setDefaultCursor("crosshair");
            }
            return;
          }}
        </Map>
      </div>
    </APILoader>
  );
}

export default Demo;

[yan0727]

@jaywcjlove 感谢作者的回复，但是我要改的是使用高德的自定义地图，我看你的参数说明，不是写这个参数的吗？

[jaywcjlove]

@yan0727 那你也得符合高德地图的 API 文档规范不知道你看的是什么文档

https://lbs.amap.com/api/javascript-api/reference/map

[jaywcjlove]

地图默认鼠标样式。参数defaultCursor应符合CSS的cursor属性规范

符合CSS的cursor属性规范

@yan0727 高德官方文档是这么说的

[yan0727]

@jaywcjlove 我看的是您这个组件的参数说明，我找到了，我改的是mapStyle,谢谢了