演示几个地图事件:

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. quartz定时任务时间设置

    这些星号由左到右按顺序代表 :     *    *     *     *    *     *   *                                   格式: [秒] [分] ...

  2. Crashing Robots（imitate）

    Crashing Robots Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8124   Accepted: 3528 D ...

  3. 小白科普之JavaScript的数组

    一.与其他语言数据的比较    相同点:有序列表    不同点:js的数组的每一项可以保存任何类型的数据:数组的大小是可以动态调整的 二.数组创建的两种方法 1)  var colors = new ...

  4. 15 条实用 Linux/Unix 磁带管理命令

    导读 磁带设备应只用于定期的文件归档或将数据从一台服务器传送至另一台.通常磁带设备与 Unix 机器连接,用 mt 或 mtx 控制.强烈建议您将所有的数据同时备份到磁盘(也许是云中)和磁带设备中. ...

  5. GDB 使用大法

    一.GDB 我用的是 GCC+POWERSHELL+GDB,  GDB刚刚接触也有很多要记的. 二.一个调试示例 tst.c #include <stdio.h> int func(int ...

  6. C/C++语法知识：typedef struct 用法详解

    第一篇:typedef struct与struct的区别 1. 基本解释 typedef为C语言的关键字,作用是为一种数据类型定义一个新名字.这里的数据类型包括内部数据类型(int,char等)和自定 ...

  7. 深入了解PooledConnectionFactory CachingConnectionFactory Sin

    深入理解PooledConnectionFactory CachingConnectionFactory SingleConnectionFactory PooledConnectionFactory ...

  8. Coin Change

    You are given coins of different denominations and a total amount of money amount. Write a function ...

  9. Android 调用浏览器和嵌入网页

    Android App开发时由于布局相对麻烦,很多时候一个App通常是由html5和原生控件相结合而成.简单的网页应用可以直接内嵌html5页面即可,对于需要调用复杂的底层功能时则采用原生控件的方式进 ...

  10. windows下bat批处理实现守护进程

    本文转自网络,由于找不到原作者,因而无法知道出处.如果有幸让原作者看到,请联系我加上.先转载至此. 最近几天加班加疯掉了,天天晚上没法睡.开发部的一个核心程序总是会自己宕机,然后需要手工去起,而这个服 ...