Как я могу перетащить объект DOM (изображение) (который находится снаружи) на карту, а затем создать там маркер? - PullRequest
Новая
       27

Как я могу перетащить объект DOM (изображение) (который находится снаружи) на карту, а затем создать там маркер?

2 голосов
/ 30 апреля 2010

Я просто хочу добавить какие-нибудь маркеры, которые перечислены рядом с картой, тогда пользователь может перетащить их на карту. Я пытался использовать GEvent.addDomListener (domObj, "drag", functName); но это не сработало. Есть ли способ сделать это? Спасибо Дау

1 Ответ

3 голосов
/ 03 мая 2010

Я не уверен, используете ли вы jQuery UI или нет, но я бы порекомендовал использовать эту библиотеку, поскольку она упростит процесс создания перетаскиваемого элемента DOM и поиска позиции для элемента.

В этом примере используется jQuery UI , чтобы найти координаты Div Pixel перетаскиваемого элемента после его перемещения.

Используя jQuery UI - мы собираемся сделать пару вещей:

  • Сделать элемент перетаскиваемым
  • Создать прослушиватель событий, когда перетаскивание элемента остановилось

  • Передать позицию элемента после перемещения элемента в другую функцию с именем 'createMarker', где мы создадим наш маркер 

     $("#dragMe").draggable({
     stop:function(event,ui){
          window.createMarker(ui.position);
     }
 });

Create Marker будет отвечать за следующие действия:

  • Получите левую и верхнюю позиции нашего перетаскиваемого элемента
  • Рассчитать эквивалентную точку GLatLng для этой точки, принимая во внимание смещение нашей карты

  • Создайте маркер и добавьте его на карту 

            function createMarker(position)
        {
            //Adjust Offset
            var offset = {
                    left:10,
                    top:-5
            }

               //Create a new GPoint
               var myGPoint = new GPoint(
                   position.left+offset.left,
                   position.top+offset.top
               );

               //Calculate the LatLng for this point
               var myLatLng = map.fromDivPixelToLatLng(myGPoint);

               //Create the Marker and add it to the Map
               var marker = new GMarker(myLatLng);
               map.addOverlay(marker);
            }

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

:)

...