javascript - 使用 setPosition 时旋转不起作用

Question

我在图标中使用 svg 符号，问题是当我使用 setPosition 时， map 上的图标或标记在标题更改时不会旋转。但是如果我更改为 setMap(map) ，它将更改标题，问题是图标或标记会再次闪烁，这是我不喜欢的。使用 setPosition 时如何旋转 svg？

提前谢谢您。

var map;
var marker;
var markerarray =[];
var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z";
setInterval(function(){
  $.ajax({
    type: "post",
    url: "vehiclecordinates.php",
    success: function(data){
      coordinates = data.latlng;
      vehiclename = data.vehiclename;
      heading      = data.heading;
      for (var i = 0; i < coordinates.length; i++) {
        newcoordinate = new google.maps.LatLng(coordinates[i].split(",")[0],coordinates[i].split(",")[1]);
        if (markerarray[vehiclename[i]] && markerarray[vehiclename[i]].setPosition){

          markerarray[vehiclename[i]].icon.rotation = parseInt(heading[i]);
          markerarray[vehiclename[i]].setPosition(newcoordinate);



        }else {
          marker =  new MarkerWithLabel({
            map:map,
            labelClass: "mylabels",
            labelStyle: {opacity: 1.0},
            labelContent: '<div>'+ vehiclename[i]+'</div>',
            icon:{
              path: car
            scale:.7,
            strokeColor: 'white',
            strokeWeight: .10,
            fillOpacity: 1,
            fillColor: '#404040',
            offset: '5%',
            rotation: parseInt(heading[i]),
            anchor: new google.maps.Point(10, 50)
            }
          });
          marker.setPosition(newcoordinate);
          markerarray[vehiclename[i]] = marker;
        }
      }
    }
  });
},5000);

更新我让它工作了，但标签在闪烁，但符号不闪烁，这是我的解决方案

 if (markerarray[vehiclename[i]] && markerarray[vehiclename[i]].setPosition){

              markerarray[vehiclename[i]].icon.rotation = parseInt(heading[i]);
              markerarray[vehiclename[i]].setPosition(newcoordinate);

      new MarkerWithLabel(markerarray[vehiclename[i]]);
}

如果这不是个好主意，请告诉我。

Answer 1

看起来像是 MarkerWithLabel 的问题，而不是 API 本身的问题。

如果我使用 google.maps.Marker 对象:

jsfiddle

marker = new google.maps.Marker({
    position: new google.maps.LatLng(50.124462, -5.539994),
    icon: icon
});
var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z";
var icon= {
          path: car,
        scale:.7,
        strokeColor: 'white',
        strokeWeight: .10,
        fillOpacity: 1,
        fillColor: '#404040',
        offset: '5%',
        // rotation: parseInt(heading[i]),
        anchor: new google.maps.Point(10, 50)
        };
setInterval(function () {
    angle += 30;
    icon.rotation = angle;
    marker.setIcon(icon);
    marker.setPosition(google.maps.geometry.spherical.computeOffset(marker.getPosition(), 1000, 90));
    map.setCenter(marker.getPosition());
}, 1000);

它有效。

如果我使用与 MarkerWithLabel 相同的代码，它会出现 JavaScript 错误(Uncaught TypeError: Cannot read property 'x' of null, Uncaught TypeError: Cannot read property 'k' of undefined )并失败:

jsfiddle

var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z";
var icon= {
        path: car,
        scale:.7,
        strokeColor: 'white',
        strokeWeight: .10,
        fillOpacity: 1,
        fillColor: '#404040',
        offset: '5%',
        // rotation: parseInt(heading[i]),
        anchor: new google.maps.Point(10, 50)
        };

marker =  new MarkerWithLabel({
        map:map,
        labelClass: "mylabels",
        labelStyle: {opacity: 1.0},
        labelContent: '<div>'+ "vehiclename[i]"+'</div>',
        icon:{
          path: car,
        scale:.7,
        strokeColor: 'white',
        strokeWeight: .10,
        fillOpacity: 1,
        fillColor: '#404040',
        offset: '5%',
        // rotation: parseInt(heading[i]),
        anchor: new google.maps.Point(10, 50)
        }
      });
setInterval(function () {
    angle += 30;
    icon.rotation = angle;
    marker.setIcon(icon);
    marker.setPosition(google.maps.geometry.spherical.computeOffset(marker.getPosition(), 1000, 90));
    map.setCenter(marker.getPosition());
}, 1000);