0

我正在尝试自定义我的 Web 应用程序的地图，我正在使用 react-map-gl（Uber 开源代码） 我尝试更改地图的图标引脚但我无法弄清楚，字符串代码 ICON 是什么意思？

从“反应”导入反应，{ PureComponent }；

常量图标 = M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3 c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9 C20.1,15.8,20.2,15.8,20.2,15.7z;

const pinStyle = { 光标：'指针'，填充：'#d00'，笔画：'无'};

导出默认类 CityPin 扩展 PureComponent {

render() { const { size = 20, onClick } = this.props;

return (
  <svg
    height={size}
    viewBox="0 0 24 24"
    style={{ ...pinStyle, transform: `translate(${-size / 2}px,${-size}px)` }}
    onClick={onClick}
  >
    <path d={ICON} />
  </svg>
);

} }

ICON const 中的所有这些数字是什么意思？如何根据此代码更改样式？请帮忙，谢谢:)

4

3 回答 3

3

All of the gibberish that is the ICON constant is SVG Path notation and is actually drawing your current symbol. If you want to learn more about it, here is another resource. There are even websites that can help you build your own SVG path string, Option 1 Option 2, and searching the web will pull up many more.

Note that you likely need to update the viewbox numbers to fit your new thing once you have the symbol you want. It otherwise chops off the symbol at those dimensions.

In trying to figure this out, my example update was:

const ICON = 'm 10 35 l 15 30 l 15 -30 A 20 20 180 1 0 10 35 z'

with a viewbox in the svg tag of:

viewBox="-8 0 55 65"

EDIT:: you can also use any image as explained in the other answers. There is an article on using custom images at Medium with a good explanation and more details.

于 2020-05-16T21:10:32.180 回答
1

您提到您正在使用 react-map-gl，因此您可以使用 Marker 组件来更改您的图标引脚。

您是否希望将特定图像用于您的图标，例如 .png 文件？如果是这样，将该图像添加到名为“public”的目录中。然后，在您创建标记的地图中，您可以显示此特定图像。

例如，如果您有一个名为 mapicon.png 的图像，您可以将其添加到您的公用文件夹中。然后，当您创建标记时，您可以执行类似的操作。

import ReactMapGL, {Marker} from 'react-map-gl';


<Marker key={} latitude={} longitude={}>
    <img
      src="mapicon.png"
      alt="map icon"
     />
</Marker>

据我了解，该字符串只是对图标图像存储位置的引用。希望这可以帮助！

于 2019-10-27T23:14:33.847 回答
0

您可以使用 SVG 文件创建自定义地图标记。如果您使用的是 create-react-app，则可以将 svg 图标作为组件导入，如下所示：

import { ReactComponent as Pin } from '../../images/map-marker-icon.svg';

然后，在上面的示例代码中，您可以替换

<path d={ICON} />

有了这个组件。这是一个例子：

export default class MapPin extends PureComponent {
  render() {
      <Marker  longitude={this.props.longitude} latitude=this.props.latitude}>
        <svg 
             onClick={() => onClick()}
             viewBox="0 0 60 100"
             enable-background="new 0 0 60 100">
          <Pin/>
        </svg>
      </Marker>
    ));
  }
}
于 2020-02-28T08:35:44.557 回答