现在的位置: 首页 > 综合 > 正文

google map 多 Marker 多个InfoWindow event

2012年08月07日 ⁄ 综合 ⁄ 共 2295字 ⁄ 字号 评论关闭

 

参考http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/events.html#EventArguments

 

Using Closures in Event Listeners

 在事件侦听器中使用闭包

When executing an event listener, it is often advantageous to have both private and persistent data attached to an object. JavaScript does not support "private" instance data, but it does support closures which
allows inner functions to access outer variables. Closures are useful within event listeners to access variables not normally attached to the objects on which events occur.

在执行事件侦听器时,通常可取的做法是将私有数据和持久性数据附加到对象中。JavaScript 不支持“私有”实例数据,但它支持允许内部函数访问外部变量的闭包。在事件侦听器访问通常不附加到发生事件的对象的变量时,闭包非常有用。

The following example uses a function closure in the event listener to assign a secret message to a set of markers. Clicking on each marker will review a portion of the secret message, which is not contained
within the marker itself.

下例在事件侦听器中使用函数闭包将加密消息分配给一组标记。点击每个标记都可以看到加密消息的一部分,该消息并未包含在标记自身内。

var map; //全局变量
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementByIdx_x_x("map_canvas"), myOptions);

  // Add 5 markers to the map at random locations
  var southWest = new google.maps.LatLng(-31.203405,125.244141);
  var northEast = new google.maps.LatLng(-25.363882,131.044922);
  var bounds = new google.maps.LatLngBounds(southWest,northEast);
  map.fitBounds(bounds);
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 5; i++) {
    var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    var j = i + 1;
    marker.setTitle(j.toString());
    attachSecretMessage(marker, i);//所以这里传值就不用传map值了
  }
}

// The five markers show a secret message when clicked
// but that message is not within the marker's instance data

function attachSecretMessage(marker, number) {
  var message = ["This","is","the","secret","message"];
  var infowindow = new google.maps.InfoWindow(
      { content: message[number],
        size: new google.maps.Size(50,50)
      });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

View example (event-closure.html)

刚开始写的时候写到一块去了,没有用函数功能,不过目前也不太明白为什么?

而且没有传map的值,后来才发现原来例子里map是全局变量,而我是局部变量。

为什么不能在一起写的原因是,marker它会认为是一个图标,所以总是显示最后一个的,而不是对应的每一个。

【上篇】
【下篇】

抱歉!评论已关闭.