`
ponlya
  • 浏览: 164384 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

GoogleMap V3 事件

    博客分类:
  • maps
 
阅读更多

事件处理:

From:https://developers.google.com/maps/documentation/javascript/events?hl=zh-CN

添加center_changed事件,click,DOM load

<style>
	html, body, #map-canvas {
	margin: 0;
	padding: 0;
	height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.9&sensor=false"></script>
<script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(30.51667,114.31667),     
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  
  //3 秒后将地图平移回标记处
  //如果检测视口中的变化,使用特定的 bounds_changed 事件,而非其组成部分 zoom_changed 和 center_changed 事件。
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    title: '点击缩放' 
  }); 
  
  google.maps.event.addListener(map, 'center_changed', function() { 
    window.setTimeout(function() {
      map.panTo(marker.getPosition());
    }, 3000);
  });

  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
  }); 
} 
google.maps.event.addDomListener(window, 'load', initialize);

</script>
<div id="map-canvas"></div>

 监听缩放比例变化

<script>
var map;
function initialize() {
  var myLatLng = new google.maps.LatLng(30.51667,114.31667);
  var mapOptions = {
    zoom: 4,
    center: myLatLng,     
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  
  var infowindow = new google.maps.InfoWindow({
    content: '点击或缩放查看缩放比例',
    position: myLatLng
  });
  infowindow.open(map);

  google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoomLevel = map.getZoom();
    map.setCenter(myLatLng);
    infowindow.setContent('缩放比例: ' + zoomLevel);
	infowindow.open(map);
  });

} 
google.maps.event.addDomListener(window, 'load', initialize);
</script>

 

分享到:
评论

相关推荐

    GoogleMap V3 中文 教程

    Google Map V3是Google Maps API的一个重要版本,主要针对Web开发,提供了一整套用于在网页中集成地图、定位、路线规划等功能的工具。这个中文教程可以帮助开发者理解和运用V3版本的API,即便在无法访问互联网的情况...

    Google Map V3 开发手册

    Google Map V3 开放手册 开放文档 里面包含了 Map类 方法 属性 是咧

    google map v3离线地图资源包

    在IT行业中,Google Map V3是Google Maps API的第三大主要版本,专为Web开发者设计,用于在网页上集成和自定义地图功能。这个“google map v3离线地图资源包”显然提供了一种方法,使得用户能够在没有互联网连接的...

    谷歌地图Google Map API V3中文开发文档

    谷歌地图 Google Map API V3 中文开发文档提供了一个详细的中文开发指南,涵盖了谷歌地图 Google Map API V3 的使用方法、相关类库、事件处理等方面的知识点。开发者可以根据自己的需求,选择合适的组件和方法来创建...

    google map api v3源码

    由于这个压缩包名为"WebMap",里面可能包含了一个简单的web应用,展示如何使用谷歌地图API V3来创建一个网页地图。开发者可以通过分析和学习这个源码,了解上述知识点的实际应用,并进一步扩展自己的地图应用开发...

    Google Map V3 API

    **Google Map V3 API**是谷歌提供的一种用于在网页中集成地图功能的接口,它允许开发者利用JavaScript语言创建交互式的地图应用。这个API是Google Maps API的第三个主要版本,提供了更多的功能、更好的性能以及更...

    wpf google map v3 示例

    **WPF Google Map V3 示例详解** 在Windows Presentation Foundation(WPF)开发中,集成Google Maps API可以帮助我们创建丰富的地理信息系统应用。本示例重点介绍了如何在WPF项目中使用Google Maps API V3,实现...

    Google Map v3 官方实例

    综上所述,"Google Map v3 官方实例"中的内容涵盖了地图集成、交互设计、地理信息处理等多个方面,对于任何希望在网站或应用中集成地图功能的开发者而言,都是极其宝贵的参考资料。通过学习和实践这些实例,开发者...

    谷歌MAP_V3中文详解以及一个简单例子

    谷歌地图API V3是Google提供的一套用于在网页上嵌入地图、进行地理位置处理的JavaScript接口。这个API允许开发者在自己的网站上创建交互式地图,包括但不限于定位、标记、信息窗口、路线规划等功能。本教程将对谷歌...

    GoogleMap V3 样式

    **GoogleMap V3 样式详解** 在Web开发中,Google Maps API V3是一个强大的工具,它允许开发者在网页上嵌入交互式的地图,并进行高度自定义。本篇将深入探讨如何利用Google Maps API V3来创建和管理地图的样式,以...

    google map v3 经纬度转换成详细地址

    根据经纬度转换成详细地址。由于google map v2 已申请不了key 了, 更换成v3, 代码也需要更换成v3代码。2013-10-30上传。

    googleMap V3 中文API

    谷歌地图JavaScript API V3是谷歌提供的用于在网页中嵌入交互式地图的服务。这个API允许开发者通过JavaScript编程语言创建各种地图应用,包括自定义标记、信息窗口、路线规划、地理编码、以及各种地图样式和控件。V3...

    Google Map api V3 (3.9.12)的离线开发包

    Google Map API V3(3.9.12)是谷歌提供的一个用于在网页上嵌入交互式地图的服务,它是Google Maps JavaScript API的第三个主要版本。这个离线开发包允许开发者在没有网络连接的情况下进行地图应用的开发和测试,这...

    google map v3,V3地图搜素,V3地图标注

    在本文中,我们将深入探讨Google Maps API的第三版(V3),主要关注V3地图搜索、地图标注以及多点标注的实现。Google Maps API V3是Google提供的一个强大的JavaScript库,用于在网页上嵌入交互式地图,进行地理位置...

    google map jsv3 示例

    在IT行业中,Google Maps JavaScript API V3(简称jsv3)是开发人员广泛使用的工具,用于集成地图功能到Web应用程序中。这个API提供了丰富的功能,包括地图显示、标记定位、路径绘制、地理编码、信息窗口等。下面...

    Google Map API最新版本(V3)代码示例源码和教程

    Google Map API最新版本(V3)代码示例源码和教程,包括了添加地图、在地图上添加和自定义marker的内容、添加曲线和曲线的点击事件等最常用功能。详细教程请见:...

    google map v3 demo 数据库动态案例 php的

    谷歌地图API V3是一个强大的工具,用于在网页上集成交互式地图功能。在这个案例中,我们将探讨如何使用PHP和MySQL数据库与谷歌地图V3 API进行动态交互,实现用户点击地图后添加标记,并将这些标记信息存储到数据库中...

    Google Map V3版 根据KeyDragZoom制作DragZoomControl

    本篇我们将深入探讨如何在Google Maps V3中利用KeyDragZoom插件创建自定义的DragZoomControl。 首先,KeyDragZoom是一个非常实用的插件,它扩展了Google Maps的基本功能,允许用户通过按住键盘上的某个键(通常是...

    经典教程:JavaScript调用Google Map API V3

    JavaScript调用Google Map API V3是一项常见的Web开发任务,它允许开发者在网页中嵌入交互式地图,并根据需求进行自定义。以下是对这个经典教程的详细解析: 1. **目标** - 整个教程旨在教会读者如何利用...

    Google Map MarkerCluster使用簡介

    使用 MarkerCluster 需要載入相關的 JavaScript 檔案,包括 Google Map API 的 V3 版本和 MarkerClusterer.js。 MarkerClusterer.js 是一個第三方 JavaScript 庫,用於實現標記點聚合功能。 在使用 MarkerCluster ...

Global site tag (gtag.js) - Google Analytics