演示几个地图事件:

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. codevs1688 求逆序对

    题目描述 Description 给定一个序列a1,a2,…,an,如果存在i<j并且ai>aj,那么我们称之为逆序对,求逆序对的数目 数据范围:N<=105.Ai<=105. ...

  2. Android Toast 封装，避免Toast消息覆盖，替换系统Toast最好用的封装

    Android Toast 封装,避免Toast消息覆盖,无阻塞,等强大功能   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  3. Android学习笔记之打钩显示输入的密码

    利用EditText作为密码输入框是个不错的选择(只需设置输入类型为textPassword即可),保密且无需担心被盗取.但有时用户也不知道自己输入的是否正确,这时就应该提供一个“显示密码”的复选框, ...

  4. 查看远程git log

    $ git reset --hard bit/add $ git log --oneline --graph

  5. hiho #1272 买零食 [Offer收割]编程练习赛2

    #1272 : 买零食 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho很喜欢在课间去小卖部买零食.然而不幸的是,这个学期他又有在一教的课,而一教的小卖部姐姐以冷若冰 ...

  6. Linux Apache和Nginx网络模型详解

    进程阻塞和挂起的定义: 阻塞是由于进程所需资源得不到满足,并会最终导致进程被挂起     进程挂起的原因并不一定是由于阻塞,也有可能是时间片得不到满足,挂起状态是进程从内存调度到外存中的一种状态,若在 ...

  7. Spring源码学习（二）AOP

    ----ProxyFactoryBean这个类,这是AOP使用的入口---- AOP有些特有的概念,如:advisor.advice和pointcut等等,使用或配置起来有点绕,让人感觉有些距离感,其 ...

  8. iOS7 status bar 样式问题

    在ios7中,有如下status bar 样式 typedef NS_ENUM(NSInteger, UIStatusBarStyle) { UIStatusBarStyleDefault = , / ...

  9. Girls and Boys(poj 1466)

    题目描述: 给出一系列男女配对意愿信息.求一个集合中的最大人数,满足这个集合中两两的人不能配对. /* 二分图的最大独立集 因为没有给出具体的男生和女生,所以可以将数据扩大一倍,即n个男生,n个女生, ...

  10. Fence Repair（poj 3253）

    题意: 有一个农夫要把一个木板钜成几块给定长度的小木板,每次锯都要收取一定费用,这个费用就是当前锯的这个木版的长度 给定各个要求的小木板的长度,及小木板的个数n,求最小费用 提示: 以 3 5 8 5 ...