演示几个地图事件:

1. 点击标记缩放地图

仍然使用上一遍文章使用的英国伦敦的地图。点用户点击标记时实现缩放地图的功能(点击标记时绑定地图缩放事件)。

代码如下：

<html>

<head>

<script

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">

</script>

<script>

var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()

{

var mapProp = {

  center: myCenter,

  zoom:5,

  mapTypeId: google.maps.MapTypeId.ROADMAP

  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({

  position: myCenter,

  title:'Click to zoom'

  });

marker.setMap(map);

// Zoom to 9 when clicking on marker

google.maps.event.addListener(marker,'click',function() {

  map.setZoom(9);

  map.setCenter(marker.getPosition());

  });

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body>

<div id="googleMap" style="width:500px;height:380px;"></div>

</body>

</html>

使用 addListener() 事件处理程序来注册事件的监听。该方法使用一个对象，一个事件来监听，当指定的事件发生时 函数将被调用。

2. 重置标记

通过给地图添加事件处理程序来改变 'center' 属性，以下代码使用 center_changed 事件在3秒后标记自动移到中心点,代码如下：

<html>

<head>

<script

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">

</script>

<script>

var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()

{

var mapProp = {

  center: myCenter,

  zoom:5,

  mapTypeId: google.maps.MapTypeId.ROADMAP

  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({

  position: myCenter,

  title:'Click to zoom'

  });

marker.setMap(map);

// Zoom to 9 when clicking on marker

google.maps.event.addListener(marker,'click',function() {

  map.setZoom(9);

  map.setCenter(marker.getPosition());

  });

google.maps.event.addListener(map,'center_changed',function() {

// 3 seconds after the center of the map has changed, pan back to the marker

  window.setTimeout(function() {

    map.panTo(marker.getPosition());

  },3000);

  });

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body>

<div id="googleMap" style="width:500px;height:380px;"></div>

</body>

</html>

3. 点击标记时打开信息窗口。

点击标记在信息窗口显示一些文本信息，代码如下:

<html>

<head>

<script

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">

</script>

<script>

var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()

{

var mapProp = {

  center:myCenter,

  zoom:5,

  mapTypeId:google.maps.MapTypeId.ROADMAP

  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({

  position:myCenter,

  });

marker.setMap(map);

var infowindow = new google.maps.InfoWindow({

  content:"Hello World!"

  });

google.maps.event.addListener(marker, 'click', function() {

  infowindow.open(map,marker);

  });

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body>

<div id="googleMap" style="width:500px;height:380px;"></div>

</body>

</html>

4. 设置标记及打开每个标记的信息窗口

当用户点击地图时执行一个窗口,用户点击地图某个位置时,在指定位置上放置一个标记，并弹出信息窗口,代码如下所示：

<html>

<head>

<script

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">

</script>

<script>

var map;

var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()

{

var mapProp = {

  center:myCenter,

  zoom:5,

  mapTypeId:google.maps.MapTypeId.ROADMAP

  };

  map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

  google.maps.event.addListener(map, 'click', function(event) {

    placeMarker(event.latLng);

  });

}

function placeMarker(location) {

  var marker = new google.maps.Marker({

    position: location,

    map: map,

  });

  var infowindow = new google.maps.InfoWindow({

    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()

  });

  infowindow.open(map,marker);

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body>

<div id="googleMap" style="width:500px;height:380px;"></div>

</body>

</html>

Google地图接口API之地图事件(四)的更多相关文章

  1. Google地图接口API之地图控件集(五)

    1.默认控件集 当使用一个标准的google地图,它的控件默认设置如下: (1). Zoom-显示一个滑动条来控制map的Zoom级别,如下所示:

  2. Google地图接口API之地图类型(六)

    1. Google 地图- 基本地图类型 Google Maps API 中提供了以下地图类型: MapTypeId.ROADMAP,用于显示默认的道路地图视图 MapTypeId.SATELLITE ...

  3. Bing必应地图中国API - 在地图上画圆

    Bing必应地图中国API - 在地图上画圆 2011-05-24 14:49:37|  分类: Bing&Google|字号 订阅     <变形金刚2>上映4日国内票房过亿,基 ...

  4. Google地图接口API之Google地图 API 参考手册(七)

    Google 地图API 参考手册 地图 构造函数/对象 描述 Map() 在指定的 HTML 容器中创建新的地图,该容器通常是一个DIV元素. 叠加层 构造函数/对象 描述 Marker 创建一个标 ...

  5. Google地图接口API之申请免费API Key(一)

    使用谷歌地图API V3创建交互式地图,首先需要拥有一个免费的 Google 地图 API key. 如果想调用Google地图的接口,首先需要拥有一个免费的 Google 地图 API key.想要 ...

  6. 使用google map v3 api 开发地图服务

    Google Map V3 API 学习地址: http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/article ...

  7. [android学习]__使用百度地图开放api编写地图定位app

    前言 在前面我已经记录关于如何使用百度地图api,以及如何配置相关的androidstudio配置了,接下来将记录如何使用百度地图api开发简单的地图定位apk,我将决定不定期持续更新本篇笔记,在每个 ...

  8. 百度地图坐标转换API和地图API

    利用百度地图的服务将经纬度转换为米单位坐标 using System; using System.Collections.Generic; using System.Linq; using Syste ...

  9. 百度地图离线API及地图数据下载工具

    全面介绍,请看下列介绍地址,改写目前最新版本的百度V2.0地图,已全面实现离线操作,能到达在线功能的95%以上 http://api.jjszd.com:8081/apituiguang/gistg. ...

随机推荐

  1. OCJP-试题集合 | 对象的比较

    Boolean b1 = new Boolean(true); Boolean b2 = new Boolean(true); 下面哪个能得到true的结果: A b1 == b2 B b1.equa ...

  2. Who Gets the Most Candies?（线段树 + 反素数 ）

    Who Gets the Most Candies? Time Limit:5000MS     Memory Limit:131072KB     64bit IO Format:%I64d &am ...

  3. MFC 中控件的启用与禁用

    启用和禁用控件可以调用CWnd::EnableWindow 函数. BOOL EnableWindow(BOOL bEnable = TRUE); 判断控件是否可用可以调用 CWnd::IsWindo ...

  4. HDU 1029 Ignatius and the Princess IV

    解题报告: 题目大意:就是要求输入的N个数里面出现的次数最多的数是哪一个,水题.暴力可过,定义一个一位数组,先用memset函数初始化,然后每次输入一个数就将下标对应的上标对应的那个数加一,最后将整个 ...

  5. 第12章 使用Samba或NFS实现文件共享

    章节简述: 本章节为读者讲述文件共享系统的作用,了解Samba与NFS服务程序的开发背景以及用法. 详细逐条讲解Samba服务配置参数,演示安全共享文件的配置策方法,并使用autofs服务程序自动挂载 ...

  6. Unity模型导入的若干问题

    原地址:http://tieba.baidu.com/p/2807225555 我觉得有三点感觉在导出时比较重要的1.单位的设置3dsmax系统单位设置就设成厘米显示单位公制也设成厘米这样在max里的 ...

  7. Iphone和iPad适配, 横竖屏

    竖屏情况下: [UIScreen mainScreen].bounds.size.width = 320 [UIScreen mainScreen].bounds.size.width = 568 横 ...

  8. 使用nginx的proxy_cache做网站缓存

    为什么要做web cache,我想大家最主要的是解决流量的压力.随着网站流量的提升,如果只是单台机器既处理静态文件,又处理动态脚本,显然效率很难上升,不能处理日益上涨的流量压力.与此同时某些网站的页面 ...

  9. Install ssdb-rocks on CentOS 6

    Install ssdb-rocks on CentOS 6 C.C.  发表于 2014年08月10日 20:14 | Hits: 649 为了优化节操精选的弹幕系统,打算更换到Facebook的R ...

  10. JS的trim()方法

    去除字符串左右两端的空格,在vbscript里面可以轻松地使用 trim.ltrim 或 rtrim,但在js中却没有这3个内置方法,需要手工编写.下面的实现方法是用到了正则表达式,效率不错,并把这三 ...