Google Maps(JS)开发入门(8):响应鼠标点击事件

在Google Maps开发中,用户交互是很重要的一部分内容,例如:放大,缩小,移动等等。今天介绍在Google Maps中使用简单的鼠标点击事件。

核心代码

var marker = new google.maps.Marker({
  position: map.getCenter(),
  map: map,
  title: '点击放大'
});
google.maps.event.addListener(marker, 'click', function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

代码解释

var marker = new google.maps.Marker({
  position: map.getCenter(),
  map: map,
  title: '点击放大'
});

这里在地图中添加了一个marker,位置是当前地图的中心,鼠放上去的时候显示“点击放大”四个字。

google.maps.event.addListener(marker, 'click', function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

这里是监听了鼠标点击事件,在点击鼠标的时候地图缩放到level 9,地图中心在当前地图中心。

全部代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>鼠标点击事件</title>
<script type="text/javascript">
var map;
function initialize(){
  var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(25.091075 , 121.55983449999997)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    title: '点击放大'
  });
  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(9);
    map.setCenter(marker.getPosition());
  });
}
function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&key=你的API-KEY&sensor=false&' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;
</script>
</head>
<body>
<div id="map-canvas" style="width:500px; height:500px;"></div>
</body>
</html>

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

效果如下

另:本文使用的是异步加载方式,如果需要同步加载,点击这里

Google Maps(JS)开发入门(7):异步加载Google Maps JS 库 Google Maps(JS)开发入门(9):事件监听中使用闭包

作者:,GIS爱好者。
分享本文,请您带上本文链接
分享到:

发表评论