Google地图接口API之地图事件(四)
演示几个地图事件:
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之地图事件(四)的更多相关文章
- Google地图接口API之地图控件集(五)
1.默认控件集 当使用一个标准的google地图,它的控件默认设置如下: (1). Zoom-显示一个滑动条来控制map的Zoom级别,如下所示:
- Google地图接口API之地图类型(六)
1. Google 地图- 基本地图类型 Google Maps API 中提供了以下地图类型: MapTypeId.ROADMAP,用于显示默认的道路地图视图 MapTypeId.SATELLITE ...
- Bing必应地图中国API - 在地图上画圆
Bing必应地图中国API - 在地图上画圆 2011-05-24 14:49:37| 分类: Bing&Google|字号 订阅 <变形金刚2>上映4日国内票房过亿,基 ...
- Google地图接口API之Google地图 API 参考手册(七)
Google 地图API 参考手册 地图 构造函数/对象 描述 Map() 在指定的 HTML 容器中创建新的地图,该容器通常是一个DIV元素. 叠加层 构造函数/对象 描述 Marker 创建一个标 ...
- Google地图接口API之申请免费API Key(一)
使用谷歌地图API V3创建交互式地图,首先需要拥有一个免费的 Google 地图 API key. 如果想调用Google地图的接口,首先需要拥有一个免费的 Google 地图 API key.想要 ...
- 使用google map v3 api 开发地图服务
Google Map V3 API 学习地址: http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/article ...
- [android学习]__使用百度地图开放api编写地图定位app
前言 在前面我已经记录关于如何使用百度地图api,以及如何配置相关的androidstudio配置了,接下来将记录如何使用百度地图api开发简单的地图定位apk,我将决定不定期持续更新本篇笔记,在每个 ...
- 百度地图坐标转换API和地图API
利用百度地图的服务将经纬度转换为米单位坐标 using System; using System.Collections.Generic; using System.Linq; using Syste ...
- 百度地图离线API及地图数据下载工具
全面介绍,请看下列介绍地址,改写目前最新版本的百度V2.0地图,已全面实现离线操作,能到达在线功能的95%以上 http://api.jjszd.com:8081/apituiguang/gistg. ...
随机推荐
- ThinkPHP访问不存在的模块跳到404页面
在ACTION中新建一个文件EmptyAction.class.php,文件中的代码如下: <?php class EmptyAction extends Action{ functio ...
- centos安装配置nginx
1.安装gcc yum install gcc 2.安装PCRE,zlib,OpenSSL(其中devel,是develop开发包的意思) yum install -y pcre pcre-devel ...
- HDU 4920 Matrix multiplication (硬件优化)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4920 解题报告:求两个800*800的矩阵的乘法. 参考这篇论文:http://wenku.baidu ...
- UIScrollview使用
改变内容偏移 - (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated; // animate at const ...
- 一次手工注入waf [转载]
转载自sss安全论坛 目标站点:http://www.xxx.cn:88注入点:http://www.xxx.cn:88/new/details1.asp?n_id=49909对其进行检测:http: ...
- sql注入攻击的预防函数
/* 待更新 */ addslashes htmlspecialchars mysql_escape_string($string) mysql_real_escape_string($strin ...
- Linux CPU负载
昨天查看Nagios警报信息,发现其中一台服务器CPU负载过重,机器为CentOS系统.信息如下: 2011-2-15 (星期二) 17:50 WARNING - load average: 9.73 ...
- 静态资源[org.springframework.web.servlet.PageNotFound]
springmvc 无法访问js.css.jpg等资源文件,tomcat启动报警告如下 [org.springframework.web.servlet.PageNotFound] - No mapp ...
- 如何在命令行下运行kettle的作业(job)和转换(transform)
pan 是执行转换的. Pan.bat /file C:\test.ktr /logfile c:\log.txt /level Basic kitchen是执行job的. kitchen.bat / ...
- 2013 ACM/ICPC 长春网络赛E题
题意:给出一个字符串,要从头.尾和中间找出三个完全相等的子串,这些串覆盖的区间互相不能有重叠部分.头.尾的串即为整个字符串的前缀和后缀.问这个相同的子串的最大长度是多少. 分析:利用KMP算法中的ne ...