Question

我正在尝试使用gmap3作为infowindow（我没有使用正常的infowindow，因为我需要它在每个标记上激活并且在其中有自定义的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
                }
            }
        }
      }
    }
  }
);  

});

但显然我在点击功能上写的不正确......有什么想法吗？

Answer 1

你的代码非常接近。你没有意识到的是，当你进入代码的click：function {}部分时，你不再是GMap3对象表示法样式编程，而是在标准的JavaScript函数中。您需要做的就是使用gmap3（）方法来调用addOverlay。除了下面的代码，我还创建了一个jsFiddle that shows it working。

$(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
                         }
                    });
                }
            }
        }
    });
});

gmap3添加覆盖onclick标记

1 个答案: