Клуб API Карт

Клуб API Карт

Установить координаты для своего html элемента на карте

Пост в архиве.

Здравствуйте!

Для примера нарисовал круг на canvas и добавил его в overlays.

Круг появился в нижнем правом краю карты и при начале перетаскивании карты бегает за ней.

Но при завершении перетаскивания возвращается обратно в угол.


Подскажите пожалуйста, как можно задать для своего элемента географические координаты?

Может ему нужно еще класс присвоить?

Спасибо!

 

canvas = document.createElement("canvas");
canvas.width = "256";
canvas.height = "256";
canvas.style.position = "absolute"
myMap.panes.get("overlays").getElement().appendChild(canvas);

var ctx = canvas.getContext("2d");
ctx.arc(128, 128, 64, 0, 6, false);
ctx.fillStyle = "#3298dd";
ctx.fill();

8 комментариев
Авторизуйтесь, чтобы оставить комментарий
sanarise
28 января 2016, 01:21

Здравствуйте!

Если вы хотите позиционировать вашу фигуру в гео координатах, то сначала надо перевести их в глобальные пиксели. Для этого используется соотв. проекция:
http://api.yandex.ru/maps/doc/jsapi/2.x-stable/ref/reference/projection.wgs84Mercator.xml

Глобальные пиксели это пиксельная координатная система карты и она своя на каждом масштабе. Т.е. при смене масштаба их нужно пересчитывать.
При добавлении фигуры в пейн, нужно перевести глобальные пиксели в пиксели пейна через его метод toClientPixels. При этом нужно не забыть слушать на пейне событие actionend и обновлять позицию в пейне.

А теперь вопрос, зачем вам изобретать велосипед? Почему бы не использовать геообъекты или оверлеи? 

money-mvs
28 января 2016, 01:21

Спасибо за ответ!

Мне нужно нарисовать радар и управлять ним из вне.

пример внизу: http://krpano.com/tours/bkeller/index.html

То есть нужно апи canvas.

А вoverlay.interactiveGraphicsочень урезанное апи.

Или я не прав?

sanarise
28 января 2016, 01:21

Да, урезанное. И радары мы пока рисовать не умеем )
Ну попробуйте сделать, как я написал. Если будут вопросы - задавайте. 

money-mvs
28 января 2016, 01:21

Спасибо! )

money-mvs
28 января 2016, 01:21

А где именно задавать глобальные координаты для фигуры?

Что-то я не осилил это.

sanarise
28 января 2016, 01:21

Глобальные пиксели это пиксельная декартова система координат для текущего масштаба карты. 0, 0 у нее находится в "левом-верхнем углу мира", по широте долготе это примерно -85, -180.

Если вы хотите позиционировать ваш радар по широте долготе, т.е. чтобы он был на карте, а не просто неподвижной картинкой. То вам нужно переводить его гео координаты в глобальные пиксели, а глобальные пиксели уже понимает пейн и может их сконвертировать в пиксели своего элемента, которые и надо выставить вашему canvas элементу.

Если он у вас должен быть неподвижен, т.е. не на карте, а как бы поверх нее, то тогда вам глобальные пиксели не нужны. 


money-mvs
28 января 2016, 01:21

Извиняюсь, не понял - "То вам нужно переводить его гео координаты в глобальные пиксели..."

То есть глобальные пиксели для координат канвы?


canvas = document.createElement("canvas");

canvas.width = "256";

canvas.height = "256";

canvas.style.position = "absolute"

canvas.style.left = "633844px";

canvas.style.top = "328732px";

myMap.panes.get("overlays").getElement().appendChild(canvas);

sanarise
28 января 2016, 01:21

Глобавльные пиксели получают через ту или иную проекцию (например http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/projection.wgs84Mercator.xml). Это виртуальные пиксели (система координат) - не надо их задавать в DOM.

Это универсальная обменная "валюта" для работы с координатами объектов на карте.

Глобальные пиксели нужно конвертировать в клиентские через метод http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/IPositioningContext.xml#toClientPixels пейна, в ноду которого вы будете помещать свою ноду.