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

发布时间: 2013-12-26 所属分类: 文章标签:

当前位置：

麻辣GIS » GIS笔记 » Google Maps开发教程（JS） » 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申请方法