Question

对于我的React应用，我正在实现Google Maps。我正在将react-google-maps库用于地图。我想旋转我的自定义标记图标。

我有一个SVG文件（具有多个路径和多边形），但是Google Maps仅需要字符串类型（我认为它们会在给图标提供路径后创建SVG），与link一样。

我遵循相同的回答，但我在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 Maps中）

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 值设置为地图图标。请帮帮我，我已经被困了很长时间了。

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

如何在React Google Maps中旋转标记图标（SVG图像）

1 个答案: