如何加载更多标记并沿不同方向旋转每个标记图像?

时间:2019-08-29 10:50:22

标签: reactjs google-maps-markers

我正在创建一个地图应用程序,其中要加载近70000个标记。我需要沿不同的方向(度)旋转每个标记。如果我在图标中使用单个图片网址,则地图会加载它。

        const image = {
          url: require('../../assets/images/some.svg'),

          fillColor: '#FF4500',
          fillOpacity: 0.6,

          size: new google.maps.Size(75, 75),
          origin: new google.maps.Point(0, 0),
          scaledSize: new google.maps.Size(50, 50),
          scale: 0.5,
          rotation: 20,
        };

但是我无法旋转图像。如果我使用SVG路径,我可以旋转,但是页面崩溃了。

       const image = {
         path:
            'M 3405.12 351.005 v -0.013 c -0.03 0 -0.07 0.006 -0.11 0.007 s -0.09 -0.007 -0.14 -0.007 v 0.014 c -4.37 0.155 -7.87 13.2 -7.87 17.6 v 14.183 a 1.212 1.212 0 0 0 1.22 1.212 h 13.56 a 1.219 1.219 0 0 0 1.22 -1.212 V 368.01 C 3413 363.613 3409.49 351.138 3405.12 351.005 Z',
          fillColor: '#FF4500',
          fillOpacity: 0.6,

          size: new google.maps.Size(75, 75),
          origin: new google.maps.Point(0, 0),
          scaledSize: new google.maps.Size(50, 50),
          scale: 0.5,
          rotation: 120,
        };

0 个答案:

没有答案