HTML5 Canvas Placemark для Google Maps API v3 - PullRequest
Новая
       5

HTML5 Canvas Placemark для Google Maps API v3

5 голосов
/ 18 апреля 2011

Я ищу способ создания сложных меток (или наложений, которые "прикреплены" к меткам).

Есть ли способ (я его не нашел) с помощью API Map v3 дляприкрепить / наложить на метку?

Или мне нужно будет нарисовать за пределами API Google, а затем иметь прослушиватели, которые вызывают перерисовку, когда пользователь просматривает карту?

Ответы [ 3 ]

5 голосов
/ 11 сентября 2012

Вы дополняете google.maps.OverlayView объектом, который переопределяет onAdd (), draw () и onRemove ()

В onAdd вы, вероятно, захотите установить ссылку на панель в Google.Map.MapPanes для размещения вашей разметки.Тогда вам придется обрабатывать события панорамирования и масштабирования.Вы делаете это так: 

CustomOverlayView.prototype.initPanes = function() {
var panes = this.getPanes(); //object of type google.maps.MapPanes
this.drawPane = jQuery(panes.floatPane); //we will initialize our stuff in this div element
this.drawPane.attr("id", "map-draw-pane"); //conceivable to want to reference this, usefull for debugging
this.drawPane.css("background-color", "transparent"); //DONT COVER THE GOOGLE COPYRIGHT
};

Чтобы ваш холст был полезен для рисования, вам нужен способ конвертировать ваши объекты google.maps.LatLng в объекты Point с переменными x и y.Ответ в google.maps.MapCanvasProjection, который имеет различные методы, которые вычисляют объекты местоположения, закодированные как объекты google.maps.LatLng, в полезные пиксельные координаты (и обратно). 

var projection = this.getProjection();//google.maps.MapCanvasProjection
var drawingLocationPoint = projection.fromLatLngToContainerPixel(markerData.location);

Некоторые подробности того, как поместитьхолст в гугл картах тут: http://www.samedwards.net

3 голосов
/ 21 августа 2011

Это легко сделать, так что извините, ответ не появился раньше.Надеюсь, это все еще полезно для вас.

См .: http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

И вот пример: http://code.google.com/apis/maps/documentation/javascript/examples/overlay-simple.html

Вам необходимо реализовать класс Javascript, который расширяет OverlayView.В частности, вы напишете метод draw (), который API-интерфейс Maps будет вызывать при каждом изменении состояния карты (например, при перетаскивании или увеличении).

В этом методе вы можете создать холст HTML5(или что-нибудь на самом деле) и нарисуйте все, что вам нужно.Вы получаете доступ к базовой проекции карты, которая позволяет надежно преобразовывать значения LatLngs в пиксели для текущего уровня масштабирования и типа проекции.

0 голосов
/ 25 апреля 2013

Я бы порекомендовал обратиться к этой полуофициальной библиотеке расширений для создания наложения холста:

http://google -maps-utility-library-v3.googlecode.com / svn / trunk / canvaslayer /

http://google -maps-utility-library-v3.googlecode.com / svn / trunk / canvaslayer / examples / hello2d.html

как этот пример, который использует вместо этого Raphael, но показывает, как вы можете связать свои дополнительные объекты с маркерами:

http://gmaps -samples-v3.googlecode.com / svn / trunk / cloud / cloud.HTML

...