jQuery gmap3 语法错误

Question

我正在使用 jQuery 插件 gmap3。我可以将多个标记添加到地图中，但我试图为其中一个提供信息窗口时遇到了困难。

如果我删除注释“//添加带有信息窗口的标记”下的代码，则会创建标记但没有信息窗口。使用代码如何创建没有地图。

$('#test').gmap3(
  //create the map
  { action:'init'
  },

  //add a marker with info window
  { action: 'addInfoWindow',
    address: "London"
  },
  infowindow:{
    options:{
    content: 'This is London'
    },
    apply:[
        { action:'setContent',
            args:[
            '<span style="color:#000">Here is a new content !<span>'
            ]
        }   
    ]
    },

  //add a marker
  { action: 'addMarker',
    address: "Paris",
  },

  //add a marker
  { action: 'addMarker',
    address: "Madrid",
  }

  //autofit the map view
  ,
  "autofit"     

);

我假设这是一个语法问题，但我完全被卡住了，所以非常感谢任何帮助。谢谢

更新除了自动调整功能不起作用外，我已经让它与以下内容一起使用。

$('#test').gmap3({
  action: 'addMarker',
  address: "place de l'étoile, Paris",

  marker:{
    options:{
      draggable: false
    }
  },
  infowindow:{
    options:{
      content: 'Hello World !'
    },
    events:{
      closeclick: function(){
        alert("closing : " + $(this).attr("id")); 
      }
    }
  }
},

  //add a marker
  { action: 'addMarker',
    address: "London",
  },
      "autofit" 

);

Answer 1

你的 json 中有一个尾随逗号

地址：伦敦（您提到的评论下方的第二行）

当它是 javascript 对象的最后一项时，不要提供逗号

此外，infoWindow 看起来放置不当。它应该放在花括号中我猜它可能属于函数调用的末尾，但我不熟悉 Gmap3 api。

查看 API，似乎有更简洁的方法来声明所有这些。我会参考http://gmap3.net/api.html

看起来 infoWindow 属于动作：“infoWindow”对象

类似：

$('#test').gmap3(
  //create the map
  { 
    action:'init'
  },

  //add a marker with info window
  { 
    action: 'addInfoWindow',
    address: "London"
    infowindow:{
      options:{
        content: 'This is London'
      },
      apply:[
          { action:'setContent',
              args:[
              '<span style="color:#000">Here is a new content !<span>'
              ]
          }   
        ]
      }
  },

  //add a marker
  { 
    action: 'addMarker',
    address: "Paris"
  },

  //add a marker
  { 
    action: 'addMarker',
    address: "Madrid"
  }

  //autofit the map view
  ,
  "autofit"     

);

Answer 2

我觉得gmap3的工作流程很混乱，所以很容易产生一些语法错误^^

---

编辑：

但是，他们最好将此库标记为“测试版”，直到他们没有解决一些主要问题（例如自动调整，这在他们自己的演示中也不起作用）。

使用多个标记“自动拟合”的主要问题是，您必须等到所有标记都已应用于地图。

因此，不要重复调用addMarker，而是使用addMarkers 并在addMarkers 的回调中应用“自动拟合”。

由于自动调整选项未按预期工作，请使用 google-API 提供的可能性： 从标记的位置创建一个 LatLngBounds 对象，并使用 map.fitBounds() 应用边界。

演示：http://jsfiddle.net/doktormolle/BQyXb/