Javascript 使用设置位置时旋转不工作
我在图标中使用svg符号,问题是当我使用setPosition时,当标题更改时,地图上的图标或标记不会旋转。但如果我更改为setMap(地图),它将更改标题,问题是图标或标记将再次闪烁,这是我不喜欢的。 使用setPosition时如何旋转svg 先谢谢你Javascript 使用设置位置时旋转不工作,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我在图标中使用svg符号,问题是当我使用setPosition时,当标题更改时,地图上的图标或标记不会旋转。但如果我更改为setMap(地图),它将更改标题,问题是图标或标记将再次闪烁,这是我不喜欢的。 使用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
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);
如果这不是个好主意,请告诉我。看起来是MarkerWithLabel的问题,而不是API本身的问题 如果我使用google.maps.Marker对象: 它起作用了 如果我使用与MarkerWithLabel相同的代码,它会出现javascript错误(
UncaughtTypeError:无法读取null的属性“x”
,UncaughtTypeError:无法读取未定义的属性“k”),并且失败:
var-car="6.584 v7.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 6 6 6 6 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 2 2 2 2 2 2 2 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 2 2 2 2 2 2 2 2 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 2 2 2 2 2 2 2 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773zM3.748,21.713v4.492l-2.73-0.349V14.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”;
变量图标={
路径:汽车,
比例:.7,
strokeColor:'白色',
冲程重量:.10,
不透明度:1,
填充颜色:'#404040',
抵销:“5%”,
//轮换:parseInt(标题[i]),
主持人:新谷歌地图点(10,50)
};
标记=新标记WithLabel({
地图:地图,
标签类:“mylabels”,
标签样式:{opacity:1.0},
labelContent:“+”车辆名称[i]“+”,
图标:{
路径:汽车,
比例:.7,
strokeColor:'白色',
冲程重量:.10,
不透明度:1,
填充颜色:'#404040',
抵销:“5%”,
//轮换:parseInt(标题[i]),
主持人:新谷歌地图点(10,50)
}
});
setInterval(函数(){
角度+=30;
图标旋转=角度;
marker.setIcon(图标);
marker.setPosition(google.maps.geometry.spheremic.computeOffset(marker.getPosition(),1000,90));
map.setCenter(marker.getPosition());
}, 1000);
请提供一个,您的SVG图标是什么样子的?或者至少是一些可以显示效果的东西。@geocodezip,我现在把SVG(不是您的代码,因为它不完整,仍然不是最小值)放在您发布的代码中有语法错误(路径:car
后没有逗号)所以你的意思是我需要切换到google marker而不使用MarkerWithLabel?因为旋转问题?我不知道这是否是正确的想法,我通过在if语句的设置位置下放置新的MarkerWithLabel(markerarray[vehiclename[I]])来解决它
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]]);
}
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);
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);