canvas.toDataURL для наложений на карту Google.

Ни один из API карт Google не поддерживает возможность поворота наложения карты. Для приложения, которое я пишу, мне нужно повернуть наложение карты на произвольный угол.

Поэтому я подумал, что могу отобразить свой ресурс изображения на холсте, например:

    overlay = new Image();
overlay.onload = function(){
    if (context != false){
        context.translate(canvas.width / 2, canvas.height / 2);
        context.rotate(Math.PI / 4);
        context.drawImage(overlay,0,0,67,360);

    }
};
overlay.src = 'myimage.png';

Используя API карт Google, теперь я могу создать наложение на землю:

var thing = new google.maps.GroundOverlay(href, bounds);

где href — canvas.toDataURL('image/png');

К сожалению, приведенная выше идея не работает. На данный момент он работает только с фактическим URL-адресом изображения, таким как http://www.mydomain/theimage.png

При поиске документации кажется возможным использовать холст для рендеринга пользовательских маркеров.

Как создать Google Latitude как маркеры?

но мне нужно, чтобы это работало для наземных наложений.


google-maps html html5-canvas
person Paul van Dinther    schedule 14.05.2012    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Холст определенно может работать как источник изображения. toDataURL дает вам именно то, что говорит, а URL-адреса данных взаимозаменяемы с URL-адресами изображений в браузерах, которые их поддерживают (в большинстве случаев). Как уже отмечалось, на вас распространяются ограничения одного и того же источника для получения URL-адреса данных в первую очередь, но если изображение из того же домена (или имеет CORS правильно включен), это не должно быть проблемой.

Не имея возможности посмотреть на свой код, чтобы увидеть, что происходит, вот рабочий пример на jsbin:

JSBin: оверлей Canvas.toDataURL

(он рисует множество маленьких изображений на холсте вместо более крупного повернутого изображения, как вы упомянули в своем посте, но, надеюсь, это дает достаточно идеи).

Ключевая часть:

var canvasImage = canvas.toDataURL('image/png');

var canvasOverlay = new google.maps.GroundOverlay(
    canvasImage,
    overlayLatLngBounds);
canvasOverlay.setMap(map);

Нет причин, которые не будут работать в другом месте. Обязательно дважды проверьте консоль на наличие возможных ошибок.

person Brendan Kenny    schedule 15.05.2012
comment
Это фантастический пример. Должно быть, я сделал что-то не так, но теперь я могу это исправить. Я еще не могу проголосовать за вас, но большое спасибо. - person Paul van Dinther; 16.05.2012

arrow_upward
1
arrow_downward

Использование Canvas toDataURL для создания изображения будет работать только в том случае, если вы соблюдаете политику того же происхождения.

person Chris Broadfoot    schedule 15.05.2012
comment
То же происхождение, что и что? Изображение происходит из того же домена, что и html-страница. В отладчике видно, что он создает требуемый dataURL. - person Paul van Dinther; 15.05.2012