//custom rotate icon method for Google map
var RotateIcon = function (options) {
this.options = options || {};
this.rImg = options.img || new Image();
this.rImg.src = this.rImg.src || this.options.url || '';
this.options.width = this.options.width || 50|| 52;
this.options.height = this.options.height || 47 || 60;
canvas = document.createElement("canvas");
canvas.width = this.options.width;
canvas.height = this.options.height;
this.context = canvas.getContext("2d");
this.canvas = canvas;
};
RotateIcon.makeIcon = function (url) {
return new RotateIcon({url: url});
};
RotateIcon.prototype.setRotation = function (options) {
var canvas = this.context,
angle = options.deg ? options.deg * Math.PI / 180 :
options.rad,
centerX = this.options.width / 2,
centerY = this.options.height / 2;
canvas.clearRect(0, 0, this.options.width, this.options.height);
canvas.save();
canvas.translate(centerX, centerY);
canvas.rotate(angle);
canvas.translate(-centerX, -centerY);
canvas.drawImage(this.rImg, 10, 10);
canvas.restore();
return this;
};
RotateIcon.prototype.getUrl = function () {
return this.canvas.toDataURL('image/png');
};
var makeOnlineIcon = RotateIcon
.makeIcon('/cap/static/lib/image/cap/images/online-sign-car.png');
var makeGpsIcon = RotateIcon
.makeIcon('/cap/static/lib/image/cap/images/online-gps-car.png');
var makeDataIcon = RotateIcon
.makeIcon('/cap/static/lib/image/cap/images/online-data-car.png');
var makeOfflineIcon = RotateIcon
.makeIcon('/cap/static/lib/image/cap/images/offline-sign-car.png');
//
markerTempGoogle = new google.maps.Marker({
position: {lat: lat, lng: lng}, icon: {
url: carStateIcon
.setRotation({deg: jdocGps.TG_cap_rotation - 90})
.getUrl()
}, map: gmap
});
谷歌地图旋转图片marker(图片旋转转base64)
最新推荐文章于 2022-10-02 23:48:22 发布