【发布时间】：2016-02-22 04:31:07
【问题描述】：
我最近一直在使用一些谷歌地图，我需要旋转地图标记的图标。我做了一些研究，发现了This Answer。
很遗憾，它无法正常工作。它不会渲染我需要的图像。 canvas.toDataURL 生成的 URL 是空白图片（大小正确）。
代码如下：
var latlong0=new google.maps.LatLng(44.422036688671, -73.857908744819); function initialize() {
var mapOptions = {
center: { lat: 44.422036688671, lng: -73.857908744819},
zoom: 0
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var airplane = 'img/airplane_icon.png';
var infowindow0=new google.maps.InfoWindow({
content: `
<div>
<p class='spectxt'><Flight #></p>
<div style='font-size:10px;'>
<p class='gentxtl'>Airline: <span class='acptxt'>Aero Test Ltd</span></p>
<p class='gentxtl'>Aircraft: <span class='acptxt'>Boeing 717-200 HGW</span></p>
<p class='gentxtl'>From: <span class='acptxt'>YYZ</span></p>
<p class='gentxtl'>To: <span class='acptxt'>YHZ</span></p>
</div>
</div>
`
});
var mark0=new google.maps.Marker({
position: latlong0,
map: map,
title:'Aircraft',
icon: {
url: RotateIcon
.makeIcon(
'/img/airplane_icon.png')
.setRotation({deg: 78})
.getUrl()
}
});
mark0.setMap(map);mark0.addListener('click', function() {
infowindow0.open(map, mark0);
}); }
google.maps.event.addDomListener(window, 'load', initialize);
RotateIcon 代码：
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 || 50;
this.options.height = this.options.height || this.rImg.height || 50;
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');
};
图片与网页在同一个域中，两个资源都是普通的http（没有https）。 Chrome DevTools 不会报告任何警告或错误。 canvas.toDataURL 输出this
我在 Windows 8.1 上使用 Chrome 48
我注意到它还有一些奇怪的地方。如果我将 URL 更改为 /img/logo.png，它会创建我想要的图像，但尺寸错误。 canvas.toDataURL 输出this
-EDIT-/img/airplane_icon.png可以找到here/img/logo.png可以找到here
-编辑 2-
所以，我创建了一个test page，发现它可以工作了......所以我回到了我的第一页，并注意到如果我在地图画布之后有<img src="/img/airplane_icon.png">，该页面将可以工作，但如果我删除它，页面不会。奇怪的。现在我只想在 img 中添加一个display:none，但有谁知道为什么必须包含 img 才能使页面正常工作？
【问题讨论】：
-
请提供一个Minimal, Complete, Tested and Readable example 来说明问题，包括您正在使用的图标的副本。如果我从网上获取飞机图标，您的代码似乎对我来说是正确的 (fiddle)。
-
我得到了飞机的 404...
-
已修复。当然，我在编辑中使用了错误的链接。代码本身使用了正确的链接。
-
IE中存在问题（surprize, surprize...），但是是无效字符（`）和未终止的字符串常量，可以解决。
标签： javascript canvas google-maps-api-3