如何更改react-map-gl图标？

Question

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

从‘react’导入React，{ 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；

常量指针={ 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>
);

}}

图标常量中的所有数字是什么意思？如何基于此代码更改样式？请帮帮忙，谢谢:)

Answer 1

所有的胡言乱语，即图标常量是SVG Path notation，实际上是绘制您的当前符号。如果您想了解更多信息，请访问another resource。甚至有一些网站可以帮助你构建你自己的SVG路径字符串，Option 1 Option 2，在网页上搜索会得到更多。

请注意，一旦您有了所需的符号，您可能需要更新viewbox编号以适应您的新事物。否则，它会在这些维度上砍掉符号。

在尝试解决这个问题时，我的示例更新是：

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

viewbox in the svg tag为：

viewBox="-8 0 55 65"

EDIT:：您也可以使用其他答案中解释的任何图像。有一个很好的解释和更多细节的article on using custom images at Medium。

Answer 2

你提到你正在使用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>

据我所知，该字符串只是对图标图像存储位置的引用。希望这能有所帮助！

Answer 3

可以使用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>
    ));
  }
}