演示几个地图事件:

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. Q1微信用户增长11% 微信生态圈逐渐完善

    就在今天早些时候,腾讯公布了Q1财报,微信和手Q游戏收入达18亿元,微信用户环比增长11%,微信生态圈逐渐完善.和xmyanke一起来看看具体的财报数字分析. 微信和手Q游戏付费用户环比增长100%以 ...

  2. python学习之操作mysql

    欢迎点击个人博客 http://www.iwangzheng.com/ 刚开始学python,所以很多代码都需要在ipython里尝试一下.今天记录的是最基本的操作mysql数据库. 写数据库连接操作 ...

  3. 怎样从命令行进入mac桌面

    www.iwangzheng.com 刚买的mac电脑,想在终端进入桌面,可以用下面的方式 点击桌面右上方的放大镜搜索到Terminal并打开,输入 $ cd /Users 这里会显示多个用户,进入自 ...

  4. 对原型prototype的详解

    刚开始接触对象原型时大脑就开始起义了,脑子就转不灵清了.就感觉怎么着这个概念就是灌输不进去,俗称断路.后面找了很多资料,最主要的还是要借助于<JavaScript语言精髓>这本书,让我对这 ...

  5. 发个题目坑 二模03day1

    1.数列(seq2.pas/c/cpp) 题目描述 一个数列定义如下:f(1) = 1,f(2) = 1,f(n) = (A * f(n - 1) + B * f(n - 2)) mod 7.给定 A ...

  6. php如何将数组保存为文件的方法？ 三个方法让你快速把数组保存成为文件存储

    php 缓存数组形式的变量,实际上就是将 php 将数组写入到一个文本文件或者后缀名为 .php 存储起来,使用的时候直接调用这个文件.那么如何使用 php 将数组保存为文本格式的文件呢?下面分享三种 ...

  7. iOS 使用UIWebView把oc代码和javascript相关联

    首先请参看一篇文章,作者写的很明白,请参看原地址 http://blog.163.com/m_note/blog/static/208197045201293015844274/. 其实,oc和js的 ...

  8. Windows下配置Tomcat服务器

    Tomcat服务器是Apache开源基金会的一个项目,tomcat不仅能作为静态文件的服务器,也可以作为JSP/Servlet的web容器,而且使用广泛,性能也不错,那么下面来配置一个基本的基于tom ...

  9. Java for LeetCode 051 N-Queens

    Given an integer n, return all distinct solutions to the n-queens puzzle. Each solution contains a d ...

  10. python 将pdf分页后插入至word中

    所用技术 1. python编程基础 2. 使用pyPdf 3. 使用python操作word 4. 正则表达式的使用 5. windows的bat编程 下面是一个pyPdf库使用的示例: from ...