Как повернуть значок маркера (изображение SVG) в реагировать карты Google - PullRequest
Новая
       61

Как повернуть значок маркера (изображение SVG) в реагировать карты Google

0 голосов
/ 10 октября 2018

Для моего приложения React я использую Google Maps.Я использую библиотеку act-google-maps для карт.Я хочу повернуть мой значок маркера настройки .

У меня есть файл SVG (который имеет несколько путей и многоугольник), но Карты Google требуются только в строковом типе (я думаю, что они будут создавать SVG послеуказание пути к значку) та же проблема, что и ссылка .

Я следовал тем же ответам, но я внедряю в 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>

Моя проблема в том, что я не могу установить значение вращение угла на значок карты .Пожалуйста, помогите мне, я застрял в течение длительного времени.

1 Ответ

0 голосов
/ 28 октября 2018

Вы можете добиться того же с помощью документа 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 правильный.Кроме того, вам не нужно добавлять 100Кб в размере вашего приложения, добавляя Jquery.Вы можете пропустить этот подход.

...