gmap3 добавить оверлейный маркер - PullRequest
Новая
       14

gmap3 добавить оверлейный маркер

1 голос
/ 25 ноября 2011

Я пытаюсь создать как информационное окно с gmap3 (я не использую обычное информационное окно, потому что мне нужно, чтобы оно активировалось на каждом маркере и чтобы в нем был настроенный HTML).

http://gmap3.net/api/add-overlay.html

Итак, я делаю оверлей, вот мой код: 

    $(document).ready(function(){

  $('#gmap').gmap3(
  { action:'init',
    options:{
      center:[48.8620722,2.352047],
      zoom: 10
    }
  },
  { action: 'addMarkers',
    markers:[
      {lat:48.8620722, lng:2.352047, data:'Paris 1!'},
      {lat:48.8520722, lng:2.3652047, data:'Paris 2!'},
      {lat:48.8420722, lng:2.3752047, data:'Paris 3!'}
    ],
    marker:{
      options:{
        draggable: false
      },
      events:{
        click: function(marker, event, data){
          //utilize la variable data pour importer les propriétés du projet à afficher dans le box
          //alert(data);
            {   
                action:'addOverlay',
                content:  '<div style="color:#000000; border:1px solid #FF0000; ' +
                        'background-color: #00FF00; width:200px; line-height:20px; ' +
                        'height: 20px; text-align:center">Hello World !</div>',
                latLng: [48.8620722, 2.352047],
                offset:{
                    y:-32,
                    x:12
                }
            }
        }
      }
    }
  }
);  

});

Но, видимо, то, что я написал о функции щелчка, неверно ... есть идеи?

1 Ответ

2 голосов
/ 15 марта 2012

Вы были очень близки в своем коде. Чего вы не поняли, так это того, что когда вы находитесь внутри части кода click: function {}, вы больше не участвуете в программировании стиля нотации объектов GMap3 и вместо этого находитесь в стандартной функции JavaScript. Чтобы вернуться, вам нужно использовать метод gmap3 () для вызова addOverlay. В дополнение к приведенному ниже коду я создаю jsFiddle, который показывает, что он работает . 

$(document).ready(function() {
    $('#gmap').gmap3({
        action: 'init',
        options: {
            center: [48.8620722, 2.352047],
            zoom: 10
        }
    }, {
        action: 'addMarkers',
        markers: [
            {
            lat: 48.8620722,
            lng: 2.352047,
            data: 'Paris 1!'},
        {
            lat: 48.8520722,
            lng: 2.3652047,
            data: 'Paris 2!'},
       {
            lat: 48.8420722,
            lng: 2.3752047,
            data: 'Paris 3!'}
        ],
        marker: {
            options: {
                draggable: false
            },
            events: {
                click: function(marker, event, data) {
                    $(this).gmap3({
                        action: 'addOverlay',
                        content: '<div style="color:#000000; border:1px solid #FF0000;   ' + 'background-color: #00FF00; width:200px; line-height:20px; ' + 'height: 20px; text-align:center">Hello World !</div>',
                        latLng: [48.8620722, 2.352047],
                        offset: {
                            y: -32,
                            x: 12
                         }
                    });
                }
            }
        }
    });
});​
...