Jquery GMAP3-如何使用Ajax Json请求标记+；有点击事件吗？

我想知道我怎样才能扭转这个局面

   $(function(){

        $('#test1').gmap3({
          map:{
            options:{
              center:[46.578498,2.457275],
              zoom: 5
            }
          },
          marker:{
            values:[
              {latLng:[48.8620722, 2.352047], data:"Paris !"},
              {address:"86000 Poitiers, France", data:"Poitiers : great city !"},
              {address:"66000 Perpignan, France", data:"Perpignan ! <br> GO USAP !", options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}}
            ],
            options:{
              draggable: false
            },
            events:{
              mouseover: function(marker, event, context){
                var map = $(this).gmap3("get"),
                  infowindow = $(this).gmap3({get:{name:"infowindow"}});
                if (infowindow){
                  infowindow.open(map, marker);
                  infowindow.setContent(context.data);
                } else {
                  $(this).gmap3({
                    infowindow:{
                      anchor:marker, 
                      options:{content: context.data}
                    }
                  });
                }
              },
              mouseout: function(){
                var infowindow = $(this).gmap3({get:{name:"infowindow"}});
                if (infowindow){
                  infowindow.close();
                }
              }
            }
          }
        });
      });

一个简单但（我认为）非常实用的解决方案是将映射初始化逻辑抽象为一个函数，我们称之为

initMap

，它将标记的

数组作为参数：

function initMap(markers) {
    $('#test1').gmap3({
      map:{
        options:{
          center:[46.578498,2.457275],
          zoom: 5
        }
      },
      marker:{
        values: markers || [], // Pass it an empty array if no markers are specified
        options:{
          draggable: false
        }

     ..............
}

现在，您可以在文档就绪时（使用默认标记数据或无）在AJAX调用的成功处理程序中初始化映射：

$('button').on('click', function() {
    $.ajax({
        url: 'marker.json'
    }).done(function(data) {
        // Re-initialise the map with loaded marker data
        initMap(data);
    });
});

您希望服务器输出JSON。类似于下面的静态示例（您可以愉快地使用该示例进行测试，直到完成后端设置）：

[
{ 
“latLng”：[48.8620722,2.352047]，
“数据”：“巴黎！”}，
{ 
“地址”：“86000普瓦捷，法国”，
“数据”：“普瓦捷：伟大的城市！”
},
{ 
“地址”：“66000法国佩皮尼昂”，
“数据”：“佩皮尼昂！
去美国！”，
“选择”：{
“图标”：”http://maps.google.com/mapfiles/marker_green.png"
}
}
]

你可以考虑更原子化地更新标记，因为我相信该插件将允许你在初始化后添加/删除标记，但是我所概述的解决方案可能对你来说已经足够好了

$('button').on('click', function() {
    $.ajax({
        url: 'marker.json'
    }).done(function(data) {
        // Re-initialise the map with loaded marker data
        initMap(data);
    });
});

[
    { 
        "latLng":[48.8620722, 2.352047], 
        "data":"Paris !" },
    { 
        "address":"86000 Poitiers, France", 
        "data":"Poitiers : great city !" 
    },
    { 
        "address":"66000 Perpignan, France", 
        "data":"Perpignan ! <br> GO USAP !", 
        "options": {
            "icon": "http://maps.google.com/mapfiles/marker_green.png"
        }
    }
]