4.给DOM加事件侦听器示例

此示例展示对DOM对象的侦听。点击地图,触发地图容器的侦听器,弹出alert对话框。

关键代码

sogou.maps.event.addDomListener(document.getElementById('map_canvas'),'click', showAlert);
  function showAlert() {
    alert('DIV clicked');
  }

代码解析

添加对DIV对象map_canvas的点击侦听。触发时执行函数showAlert。

sogou.maps.event.addDomListener(document.getElementById('map_canvas'),'click', showAlert);
  function showAlert() {
    alert('DIV clicked');
  }

完整代码

<!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 示例: DOM对象的事件侦听</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">
 /**
  * DOM对象的事件侦听
  * 点击地图,触发地图容器的侦听器,弹出alert对话框。
  */

  function initialize() {
    var myLatlng = new sogou.maps.LatLng(39.992792,116.326142);
    var myOptions = {
      zoom: 12,
      center: myLatlng,
      mapTypeId:sogou.maps.MapTypeId.ROADMAP
    }
    var map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);

    // 在地图容器的DOM对象上添加事件侦听器,当点击地图区时,会触发这个事件
	// 弹出对话框
	// 注意,这个事件侦听是在页面记载完毕后,调用initialize函数来添加的。
    sogou.maps.event.addDomListener(document.getElementById('map_canvas'),'click', showAlert);
  }

  function showAlert() {
    alert('DIV clicked');
  }

  sogou.maps.event.addDomListener(window,'load', initialize);
</script>
</head>
<body>
  <div id="map_canvas"></div>
</body>
</html>

运行代码