演示几个地图事件:

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. ThinkPHP访问不存在的模块跳到404页面

    在ACTION中新建一个文件EmptyAction.class.php,文件中的代码如下: <?php class EmptyAction extends Action{     functio ...

  2. centos安装配置nginx

    1.安装gcc yum install gcc 2.安装PCRE,zlib,OpenSSL(其中devel,是develop开发包的意思) yum install -y pcre pcre-devel ...

  3. HDU 4920 Matrix multiplication (硬件优化)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4920 解题报告:求两个800*800的矩阵的乘法. 参考这篇论文:http://wenku.baidu ...

  4. UIScrollview使用

    改变内容偏移 - (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated;  // animate at const ...

  5. 一次手工注入waf [转载]

    转载自sss安全论坛 目标站点:http://www.xxx.cn:88注入点:http://www.xxx.cn:88/new/details1.asp?n_id=49909对其进行检测:http: ...

  6. sql注入攻击的预防函数

    /* 待更新 */ addslashes  htmlspecialchars  mysql_escape_string($string) mysql_real_escape_string($strin ...

  7. Linux CPU负载

    昨天查看Nagios警报信息,发现其中一台服务器CPU负载过重,机器为CentOS系统.信息如下: 2011-2-15 (星期二) 17:50 WARNING - load average: 9.73 ...

  8. 静态资源[org.springframework.web.servlet.PageNotFound]

    springmvc 无法访问js.css.jpg等资源文件,tomcat启动报警告如下 [org.springframework.web.servlet.PageNotFound] - No mapp ...

  9. 如何在命令行下运行kettle的作业(job)和转换(transform)

    pan 是执行转换的. Pan.bat /file C:\test.ktr /logfile c:\log.txt /level Basic kitchen是执行job的. kitchen.bat / ...

  10. 2013 ACM/ICPC 长春网络赛E题

    题意:给出一个字符串,要从头.尾和中间找出三个完全相等的子串,这些串覆盖的区间互相不能有重叠部分.头.尾的串即为整个字符串的前缀和后缀.问这个相同的子串的最大长度是多少. 分析:利用KMP算法中的ne ...