谷歌地图 V3 上的旋转图像/标记图像
IT技术
javascript
google-maps-api-3
2021-01-31 15:59:38
6个回答
我解决这个问题的js类是：
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 || this.rImg.width || 52;
this.options.height = this.options.height || this.rImg.height || 60;
var 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, 0, 0);
canvas.restore();
return this;
};
RotateIcon.prototype.getUrl = function(){
return this.canvas.toDataURL('image/png');
};
像这样调用它：
var marker = new google.maps.Marker({
icon: {
url: RotateIcon
.makeIcon(
'https://ru.gravatar.com/userimage/54712272/b8eb5f2d540a606f4a6c07c238a0bf40.png')
.setRotation({deg: 92})
.getUrl()
}})
在此处查看现场示例http://jsfiddle.net/fe9grwdf/39/
我发现了 Google MAP V3 的两个扩展：infobox.js和markerwithlabel.js 两者都可以将图像 DOM 元素作为内容处理，反过来我可以通过 jQuery图像旋转插件进行旋转。
这甚至可以在旋转后无需再次设置标记图像的情况下工作。
编辑：截至以下问题/评论：
label 的扩展是必需的，因为它可以处理其他 DOM 元素。所以我可以添加任意 HTML 作为标签，在我的特殊情况下我添加图像。然后我使用旋转插件旋转这个图像（标签的子元素）。因此，为图像分配一个 id 以便轻松访问它。实际上，我仅将一个标签用于图像，另一个用于描述性文本。
编辑 2：由于 Stephan 对 DOM 准备情况的评论
在我的代码中，我发现了以下几行。这表明我在旋转图像之前强制在标签上绘制。
if (!this._drawn) myImageLabel.draw(); // 1st time force a draw, otherwise rotating the image will fail because an asynchronously drawn object has not all tags in place
if (this.heading != 0) this.rotateImage(this.heading, true);
编辑 3：代码示例如何创建 Infobox.js
this._img = document.createElement('img');
... further manipulations of _img / Size / Id / ...
var planeImageLabelOptions = {
content: this._img,
disableAutoPan: true,
boxStyle: planeImageLabelBoxStyle,
pixelOffset: new google.maps.Size(-imgOffsetW / 2, -imgOffsetH / 2),
closeBoxURL: "",
position: latlng,
zIndex: this.altitude < 0 ? 100 : this.altitude
};
var planeImageLabel = new InfoBox(planeImageLabelOptions);
我也很难找出旋转 .png 标记的方法。我像下面这样解决了它。您可以使用相同的自定义图像创建多个标记并旋转要旋转的特定标记。我希望它对你有帮助。
var id = 'my_marker_01';
var img_url = "../img/car.png";
var my_icon = img_url + "#" + id;
var marker = new google.maps.Marker({
icon: my_icon,
...
});
var rotate = 45;
$(`img[src="${my_icon}"]`).css(
{'-webkit-transform' : 'rotate('+ rotate +'deg)',
'-moz-transform' : 'rotate('+ rotate +'deg)',
'-ms-transform' : 'rotate('+ rotate +'deg)',
'transform' : 'rotate('+ rotate +'deg)'});
如何在 Google 地图 V3 上旋转图像（标记图像）？
我遇到了同样的问题，我用下一个代码解决了它：
var gmap;
NgMap.getMap(function(map){
gmap = map;
});
我想你有一个带有图标的变量，例如：
var imagePath = 'img/customMarker.png';
首先，我们需要创建标记选项：
var markerOptions = {
location: [x, y],
title:'some text',
draggable: true,
.
.
.
icon: imagePath
};
让我们创建一个标记：
var marker = new google.maps.Marker(markerOptions);
我们必须设置地图：
marker.setMap(map);
现在，如果要旋转图像，则需要执行以下操作：
- 将 imagePath 变量的值更改为 'img/customMarker.png#yourId'
- 使用 css 设置旋转值（例如使用 JQuery）
让我们来看看
imagePath = 'img/customMarker.png#markerOne';
$('img[src="img/customMarker.png#markerOne"]').css({
'transform': 'rotate(45deg)'
});
当然，你可以做得更漂亮：
function rotateMarker(selector, degree){
$('img[src="img/customMarker.png#'+selector+'"]').css({
'transform': 'rotate('+degree+'deg)'
});
}
你的电话：
rotateMarker('markerOne', 45);
就这样。
我希望它会有所帮助。
我已经使用以下代码在 v3 中完成了旋转：
<canvas id="carcanvas" width="1" height="1"></canvas>
if (document.getElementById('carcanvas').getContext) {
var supportsCanvas = true;
} else {
var supportsCanvas = false;
}
var rImg = new Image();
rImg.src='/images/cariconl.png';
// Returns the bearing in radians between two points.
function bearing( from, to ) {
// Convert to radians.
var lat1 = from.latRadians();
var lon1 = from.lngRadians();
var lat2 = to.latRadians();
var lon2 = to.lngRadians();
// Compute the angle.
var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
if ( angle < 0.0 )
angle += Math.PI * 2.0;
if (angle == 0) {angle=1.5;}
return angle;
}
function plotcar() {
canvas = document.getElementById("carcanvas").getContext('2d');
var cosa = Math.cos(angle);
var sina = Math.sin(angle);
canvas.clearRect(0,0,32,32);
canvas.save();
canvas.rotate(angle);
canvas.translate(16*sina+16*cosa,16*cosa-16*sina);
canvas.drawImage(rImg,-16,-16);
canvas.restore();
}
并在动画方法中：
if (supportsCanvas) {
angle = bearing(new google.maps.LatLng(lat1, lng1),new google.maps.LatLng(lat2, lng2));
plotcar();
}
我希望有帮助。