Google Maps（JS）开发入门(9)：事件监听中使用闭包

闭包是javascript语言中一项特有的性质，也是js中的难点与重点，当然本文的重点不是讨论javascript语言的特性与方法。本文将提供一种javascript闭包的Google maps应用方法（事件监听），如果你能通过本文了解js闭包的特性，那将是再好不过的了。

核心代码

var map;
function initialize() {
  var tw=new google.maps.LatLng(25.091075 , 121.55983449999997);
  var mapOptions = {
    zoom: 10,
    center: tw
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  //随机添加5个坐标点
  for(var i=0;i<5;i++){
    var position=new google.maps.LatLng(
    tw.lat()+0.1*Math.random(0,1),
    tw.lng()+0.1*Math.random(0,1)
    );
    var marker=new google.maps.Marker({
      position:position,
      map:map
    });
    marker.setTitle(i.toString());
    addmessage(marker,i);//闭包
  }
}
function addmessage(marker, num) {
  var message = ['事', '件', '的', '监', '听'];
  var infowindow = new google.maps.InfoWindow({
    content: message[num]
  });
google.maps.event.addListener(marker, 'click', function() {

infowindow.open(marker.get('map'), marker);

});

}

代码解释

addmessage(marker,i);//闭包

这里是函数的函数，产生了闭包。

效果展示

进阶分析

有的读者肯定会疑惑，这跟闭包在什么关系，这里做一个探索，假设在代码中不使用闭包，也就是下面这句代码

addmessage(marker,i);//闭包

直接把代码写在initialize函数中，代码如下

var map;
function initialize() {
  var tw=new google.maps.LatLng(25.091075 , 121.55983449999997);
  var mapOptions = {
    zoom: 10,
    center: tw
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
    //随机添加5个坐标点
  for(var i=0;i<5;i++){
    var position=new google.maps.LatLng(
      tw.lat()+0.1*Math.random(0,1),
      tw.lng()+0.1*Math.random(0,1)
    );
    var marker=new google.maps.Marker({
      position:position,
      map:map
    });
    marker.setTitle(i.toString());
    //addmessage(marker,i);//闭包
    var message = ['事', '件', '的', '监', '听'];
    var infowindow = new google.maps.InfoWindow({
      content: message[i]
    });
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(marker.get('map'), marker);
});

}

}

效果如图

我们可以发现，所有的marker都绑定了“听”，显然这不是我们想要的结果。之所以会产生这种结果，是因为在绑定click消息时，所有的marker都被绑定了。所以要实现每个marker都绑定不同的消息，这里就需要用闭包。

关于闭包

如果你对闭包一知半解，推荐下面两篇文章：

学习Javascript闭包（Closure）

理解Javascript的闭包