Question

我使用MarkerWithLabel在Google地图上创建标记，但我希望能够旋转标记图标，以便我尝试使用webkit等转换操作。

到目前为止，我有以下内容：

    var pictureLabel = document.createElement("img");
    pictureLabel.src = "helloworld.gif";

    rotateImage( pictureLabel, 20 );

        var myLatlng = new google.maps.LatLng(40,-10);

       marker = new MarkerWithLabel({
            position: myLatlng,
            labelContent: pictureLabel,
            icon: " "
        });

        marker.setMap(map);


function rotateImage( el, angle )
{
    rottext = "rotate(" + angle + "deg)";

    el.style.webkitTransform = '"' + rottext + '"';
    el.style.MozTransform = '"' + rottext + '"';
    el.style.msTransform = '"' + rottext + '"';
    el.style.OTransform = '"' + rottext + '"';
    el.style.transform = '"' + rottext + '"';
    el.style.transformOrigin = "50% 50%";
}

这不会产生图标，我无法理解原因。问题必须在函数中，当我发表评论时，我会显示图标 - 当然没有旋转。任何人都可以提出错误的建议吗？

Answer 1

这样的作业：

el.style.webkitTransform = '"' + rottext + '"';

无效，因为webkitTransform属性的正确格式为rotate(30deg)，但不是"rotate(30deg)"

说过将rotateImage函数替换为：

function rotateImage(el, angle) {
    rottext = "rotate(" + angle + "deg)";

    el.style.webkitTransform = rottext;
    el.style.MozTransform = rottext;
    el.style.msTransform = rottext;
    el.style.OTransform = rottext;
    el.style.transform = rottext;
    el.style.transformOrigin = "50% 50%";
}

<强>演示

function initMap() {
    var latLng = new google.maps.LatLng(49.47805, -123.84716);
    var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 12,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var pictureLabel = document.createElement("img");
    pictureLabel.id = "customMarker1";
    pictureLabel.src = "https://github.com/googlemaps/v3-utility-library/raw/master/markerwithlabel/examples/home.jpg";
    var marker = new MarkerWithLabel({
        position: homeLatLng,
        map: map,
        draggable: true,
        raiseOnDrag: true,
        labelContent: pictureLabel,
        labelAnchor: new google.maps.Point(50, 0),
        labelClass: "labels", // the CSS class for the label
    });
   var startAngle = 10;

    document.getElementById("btnRotate").addEventListener("click", function (event) {
        var m = document.getElementById("customMarker1");
        rotateImage(m,startAngle);
        startAngle+=30;
    });
}
function log(h) {
    document.getElementById("log").innerHTML += h + "<br />";
}






function rotateImage(el, angle) {
    rottext = "rotate(" + angle + "deg)";

    el.style.webkitTransform = rottext;
    el.style.MozTransform = rottext;
    el.style.msTransform = rottext;
    el.style.OTransform = rottext;
    el.style.transform = rottext;
    el.style.transformOrigin = "50% 50%";
}


google.maps.event.addDomListener(window, 'load', initMap);

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
 <script type="text/javascript" src="https://rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>

<button id="btnRotate">Rotate</button>
 <div id="map_canvas" style="height: 400px; width: 100%;"></div>
 <div id="log"></div>

使用webkit Transform旋转MarkerWithLabel

1 个答案: