GOOGLE MAP 学习笔记（二）事件

google.maps.Marker对象可以听下面的用户事件，例如：

• 'click'
• 'dblclick'
• 'mouseup'
• 'mousedown'
• 'mouseover'
• 'mouseout'

These events may look like standard DOM events, but they are actually part of the Maps API.这些事件可能看起来像标准的DOM事件，实际上却是在地图API的一部分。

MVC的对象通常包含状态。.每当一个对象的属性的变化，API将触发一个改变事件的属性。例如，该API会触发一个zoom_changed发生变化，在地图上地图的缩放级别。您可以通过注册拦截改变addListener()在事件处理程序event命名方法以及。

下例：当状态改变时，移动地图中心点：

     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.getElementById(“map_canvas”), myOptions); 
   
  google.maps.event.addListener(map, ‘zoom_changed’, function() {      setTimeout(moveToDarwin, 3000); 
  }); 
   
  var marker = new google.maps.Marker({ 
      position: myLatlng,  
      map: map, 
      title:”Hello World!” 
  }); 
  google.maps.event.addListener(marker, ‘click’, function() { 
    map.setZoom(8); 
  }); 
} 
   
function moveToDarwin() { 
  var darwin = new google.maps.LatLng(-12.461334, 130.841904); 
  map.setCenter(darwin); 
}

点击查看

例二：用户界面事件访问参数

当用户单击后，在单击处加上标记；并将点击点制为中心点

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.getElementById(“map_canvas”), myOptions); 
   
  google.maps.event.addListener(map, ‘click’, function(event) { 
    placeMarker(event.latLng); 
  }); 
} 
   
function placeMarker(location) { 
  var clickedLocation = new google.maps.LatLng(location); 
  var marker = new google.maps.Marker({ 
      position: location,  
      map: map 
  }); 
 
  map.setCenter(location); 
}

点击查看

三、在事件监听器中使用Closures

closures可以允许内部函数访问外部变量。

例子使用了 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.getElementById(“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); 
  } 
} 
 
// 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); 
  }); 
}

点击查看

四、在Event Handlers中获取和设置属性

如果您需要检查的状态属性上一个MVC，你应该明确地调用适当的get Property ()方法的对象。

在下面的例子，我们成立了一个事件处理程序来响应事件所带来缩放级别了一个信息窗口显示的。

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.getElementById(“map_canvas”), myOptions); 
   
  var zoomLevel; 
  var infowindow = new google.maps.InfoWindow( 
    { content: ‘Zoom Level Test’, 
        size: new google.maps.Size(50,50),          position: myLatlng 
    }); 
  infowindow.open(map); 
     
  google.maps.event.addListener(map, ‘zoom_changed’, function() { 
    zoomLevel = map.getZoom(); 
    infowindow.setContent(“Zoom: ” + zoomLevel); 
    if (zoomLevel == 0) { 
      map.setZoom(10); 
    }       
  }); 
}

点击查看