麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

Google Maps(JS)开发入门(12):原生DOM事件监听

Google Maps里面是可以跟页面的DOM进行通讯的,Google Maps里面提供了对于原生DOM的支持,本文中将演示一个Google Maps与DOM通讯示例方法。

核心代码

var map;
function initialize() {
  var tw=new google.maps.LatLng(25.091075 , 121.55983449999997);
  var mapOptions = {
    zoom: 10,
    center: tw
  };
  var domid=document.getElementById('map-canvas');
  map = new google.maps.Map(domid,mapOptions);
  google.maps.event.addDomListener(domid, 'click', function(){
    alert("点击了Dom");
  });   
}
google.maps.event.addDomListener(window, 'load', initialize);

代码解释

google.maps.event.addDomListener(domid, 'click', function(){
  alert("点击了Dom");
}); 

这是代码的DOM监听处理,其中domid是之前定义的,也就是DOM map-canvas,当点击了map-canvas之后,弹出一个Alert()对话框。

效果展示

全部代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>监听DOM事件</title>
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<!--加载google map api-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&key=你的API-KEY&sensor=true&language=zh-cn"></script>
<script type="text/javascript">
var map;
function initialize() {
  var tw=new google.maps.LatLng(25.091075 , 121.55983449999997);
  var mapOptions = {
    zoom: 10,
    center: tw
  };
  var domid=document.getElementById('map-canvas');
  map = new google.maps.Map(domid,mapOptions);
  google.maps.event.addDomListener(domid, 'click', function(){
    alert("点击了Dom");
  });   
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

把这段代码直接复制保存为.html文件,然后修改你的API Key即可使用。如果你没有 ,这里是API-KEY申请方法

麻辣GIS-Sailor
作者:
GIS爱好者,学GIS,更爱玩GIS。
微博关注
手机阅读
赞赏支持
手机阅读
微信捐助麻辣GIS
微信打赏
支付宝捐助麻辣GIS
支付宝打赏

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

3.如果本文对您有所帮助,请您对我们团队进行 打赏捐助让我们在传播3S的路上可以走得更远,不胜感激。PS:如果你是学生党,请优先把经费用于购买学习资料 以及 与小哥哥/小姐姐约会上:-)

如您有疑问,可在文末留言,或到麻辣GIS QQ群中提问。

QQ群(一):291616564 加入QQ群

QQ群(二):166408035 加入QQ群

QQ群(三):627853279 加入QQ群

QQ群(四):436386604 加入QQ群

QQ群(五):606176554 加入QQ群

QQ群(六):946178380 加入QQ群

QQ群(七):861271808 加入QQ群

新疆互助群:910717627 加入QQ群

微信公众号:malagis,扫描右边二维码直接关注。

发表评论