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

Question

对于我的 React 应用，我正在实施 Google 地图。我正在使用react-google-maps 库来制作地图。我想旋转我的自定义标记图标。

我有一个 SVG 文件（它有多个路径和多边形），但谷歌地图只需要字符串类型（我认为他们会在为图标提供路径后创建 SVG）与 link 相同的问题。

我遵循相同的 ans，但我在 React 中实现，所以我无法在 React 中转换该代码。

JS 中的工作代码

var measle = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    optimized: false,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.5, 3.5)
    }
  })

var rotationAngle = 10;
  google.maps.event.addListenerOnce(map, 'idle', function() {
    setInterval(function() {
    console.log("transform: rotate(" + rotationAngle + 'deg)');  $('img[src="http://www.geocodezip.com/mapIcons/SO_20170925_multiplePaths_mod.svg"]').css({
        'transform': 'rotate(' + rotationAngle + 'deg)',
        'transform-origin': '39px 60px'
      });
      rotationAngle += 10;
      rotationAngle %= 360;
    }, 1000);
  });
}

我在 React 中的代码（在 React Google 地图中）

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>

我的问题是我无法将 rotationAngle 值设置为 ma​​p icon。 请帮帮我，我已经卡了很长时间了。

Answer 1

您可以使用文档 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。您可以通过这种方法跳过它。