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的闭包

Google Maps(JS)开发入门(8):响应鼠标点击事件 Google Maps(JS)开发入门(10):点击地图添加marker效果

作者:,GIS爱好者。
分享本文,请您带上本文链接
分享到:

发表评论