时间戳

首页 > 解决方案 > 如何旋转我们用 js 创建的 img 元素？

image - 如何旋转我们用 js 创建的 img 元素？

问题描述

我为mapbox标记创建了一个img元素。但是当我想旋转它时，它失败了，元素没有变化。

const el = document.createElement('img');
const width = marker.properties.iconSize[0];
const height = marker.properties.iconSize[1];
el.src = marker.properties.image;
el.style.width = `${width}px`;
el.style.height = `${height}px`;
el.style.transform = "rotateZ(130deg)"; 

new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(
    new mapboxgl.Popup({offset:[140,100] }) // add popups
    .setHTML('<div class="popupWrapper"><div class="top"><img src="../images/turkey.png" 
    alt="" width="60px" height="55px"><h3 class="vessel_name">'+marker.properties.name+'</h3> 
    </div><img src="https://photos.marinetraffic.com/ais/showphoto.aspx? 
    shipid=214197&size=thumb300" alt="marine" width="300px" height="180px"><div 
    class="vessel_info"><div class="vessel_direction"><p>RU MMK</p><p>IL HAD</p></div></div> 
    </div>')
    )
 .addTo(map);

标签： imagemapboxtransformimage-rotationmapbox-marker

解决方案

推荐阅读