Reactjs 如何在谷歌地图中旋转标记图标（svg图像）

对于我的React应用程序，我正在实现谷歌地图。我在用图书馆做地图。我想旋转我的自定义标记图标

我有一个SVG文件（它有多个路径和多边形），但Google Maps只需要字符串类型（我认为他们会在给图标指定路径后创建SVG），这与我的问题相同

我使用了相同的ans，但我在React中实现，因此无法在React中转换该代码。

JS中的工作代码

我在React中的代码（在React谷歌地图中）

componentWillUpdate（）{
var rotationAngle=10；
如果（此.props.refs.map）{
设置间隔（（）=>{
让img=React.createElement（“img”{
src:“../../../public/images/amb.svg”，
样式：{transform:“rotate”（+rotationAngle+“deg）”，transformOrigin:“39px 60px”}，
参考：图像=>{
//这个.handleSize（图像）；
}
});
旋转角度+=10；
旋转角度%=360；
}, 1000);
}
}
---------------------------------------------
{（BStatus！='picked'| | BStatus！='dropled'| | BStatus！='completed'）&&props.directions&}
{props.pickupLocation&&
}  
{props.dropoffLocation&&
}
{props.waypoints&&
}

我的问题是无法将旋转角度值设置为贴图图标。

---

请帮助我，我已经被困了很长时间。

您可以通过文档WEB API实现同样的效果

document.querySelector('[src*="../../../public/images/amb.svg"]').style.transform = 'rotate(' + rotationAngle + 'deg)';
document.querySelector('[src*="../../../public/images/amb.svg"]').style.transition = 'transform 1s linear';

---

请确保您的

src

正确无误。此外，您不需要通过添加Jquery在应用程序大小中添加100Kbs。您可以通过这种方法跳过它。

这是可行的，但当您在一段时间后尝试更新图标旋转时，图标将在默认位置对齐，然后旋转。例如：如果初始位置为45度，新位置为90度，图标将变为0度，持续约一秒钟，然后变为90度。看起来有点小毛病。有什么解决办法吗？注：这只发生在Gmap标记上，而不是当图标/图像超出Gmap范围时。i、 DOM中的e。

componentWillUpdate(){
      var rotationAngle = 10;
      if(this.props.refs.map){
        setInterval(() => {
                let img = React.createElement("img", {
                src: "../../../public/images/amb.svg",
                style: {transform: "rotate(" + rotationAngle + "deg)", transformOrigin: "39px 60px"},
                ref: image => {
                  // this.handleSize(image);
                }
              });
              rotationAngle += 10;
              rotationAngle %= 360;
            }, 1000);
     
      }
    }
    
    ---------------------------------------------
    <GoogleMap
        defaultCenter={props.MapCenter}
        defaultZoom={15}
        ref={props.onMapMounted}
        onCenterChanged={props.onCenterChanged}
        defaultOptions={{streetViewControl: false,mapTypeControl: false,
        styles:[
      {
        "featureType": "poi.business",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi.park",
        "elementType": "labels.text",
        }}
      >
      {(BStatus !== 'picked' || BStatus !== 'dropped' || BStatus !== 'completed') && props.directions  && <DirectionsRenderer directions={props.directions} options={{suppressMarkers: true}} />}
        {props.pickupLocation && 
           <Marker 
           position={props.pickupLocation}
           visible={props.isShowPickMarker ? true : false}
           icon={require('../../../public/images/pick.png')}
         >
         </Marker>
         }  
         {props.dropoffLocation && <Marker
           position={props.dropoffLocation}
           visible={props.isShowDropMarker ? true : false} 
           icon={require('../../../public/images/drop.png')}
         >
            </Marker>
           }
        { props.waypoints && <Marker
            position={props.waypoints}
            visible={props.isShowDropMarker ? true : false} 
            icon = {{
                  url: require('../../../public/images/amb.svg'),
                }}
            >
            </Marker>
           }
      </GoogleMap>

document.querySelector('[src*="../../../public/images/amb.svg"]').style.transform = 'rotate(' + rotationAngle + 'deg)';
document.querySelector('[src*="../../../public/images/amb.svg"]').style.transition = 'transform 1s linear';