事件以及事件侦听器中变量的获取示例

此示例展示事件触发时,this对象将指向被侦听的对象。

关键代码

  sogou.maps.event.addListener(map, 'zoom_changed', function() 
  {
    //事件中的this将指向被侦听的对象
	//如:这里侦听的是Map对象,这this.getZoom()调用的是Map的方法。
    zoomLevel = this.getZoom();
	//也可以引用外部的Map对象,在这里this和map是同一个对象。
    map.setCenter(myLatLng);
    infowindow.setContent("Zoom: " + zoomLevel);
    if (zoomLevel == 0) {
	  //缩放到0级后自动跳回16级
      map.setZoom(16);
    }

代码解析

创建一个信息窗对象

  var zoomLevel;
  var infowindow = new sogou.maps.InfoWindow(
    { content: 'Zoom Level Test',
      position: myLatLng
    });
  infowindow.open(map);

侦听地图区变化,使用this对象。这里this对象就是map对象

  sogou.maps.event.addListener(map, 'zoom_changed', function() 
  {
    //事件中的this将指向被侦听的对象
	//如:这里侦听的是Map对象,这this.getZoom()调用的是Map的方法。
    zoomLevel = this.getZoom();
	//也可以引用外部的Map对象,在这里this和map是同一个对象。
    map.setCenter(myLatLng);
    infowindow.setContent("Zoom: " + zoomLevel);
    if (zoomLevel == 0) {
	  //缩放到0级后自动跳回16级
      map.setZoom(16);
    }
  });

完整代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>搜狗地图 JavaScript API 示例: 事件以及事件参数</title>
<style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<script type="text/javascript" src="//api.go2map.com/maps/js/api_v2.5.1.js"></script>
<script type="text/javascript">
 /**
  * 事件以及事件参数
  * 事件中的this将指向被侦听的对象。
  */
var map;
function initialize() {
  var myLatLng = new sogou.maps.LatLng(39.992792,116.326142);
  var myOptions = {
    zoom: 12,
    center: myLatLng,
    mapTypeId: sogou.maps.MapTypeId.ROADMAP
  }
  map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);

  var zoomLevel;
  var infowindow = new sogou.maps.InfoWindow(
    { content: 'Zoom Level Test',
      position: myLatLng
    });
  infowindow.open(map);

  sogou.maps.event.addListener(map, 'zoom_changed', function() 
  {
    //事件中的this将指向被侦听的对象
	//如:这里侦听的是Map对象,这this.getZoom()调用的是Map的方法。
    zoomLevel = this.getZoom();
	//也可以引用外部的Map对象,在这里this和map是同一个对象。
    map.setCenter(myLatLng);
    infowindow.setContent("Zoom: " + zoomLevel);
    if (zoomLevel == 0) {
	  //缩放到0级后自动跳回16级
      map.setZoom(16);
    }
  });
}
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

运行代码