Question

我正在尝试自定义Web应用程序的地图，正在使用react-map-gl（Uber开源代码），我试图更改地图的图标图钉，但我不知道，字符串代码ICON是什么意思？

从'react'导入React，{PureComponent};

const ICON = 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中的所有这些数字是什么意思？如何根据此代码更改样式？请帮忙，谢谢：）

Answer 1

作为ICON常量的所有乱码都是SVG Path notation，实际上是在绘制您当前的符号。如果您想了解更多信息，请访问another resource。甚至还有一些网站可以帮助您构建自己的SVG路径字符串Option 1 Option 2，并且在网络上搜索还会增加更多内容。

请注意，一旦有了所需的符号，您可能需要更新视图框编号以适合您的新事物。否则，它将在这些尺寸处切掉符号。

在试图弄清楚这一点时，我的示例更新是：

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"

编辑：：您还可以使用其他答案中所述的任何图像。 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>
    ));
  }
}

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

3 个答案: