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. ...
随机推荐
- 在html中注释对 <include XXXXXXXX />是没有影响的
在html中注释对 <include XXXXXXXX />是没有影响的
- [官方教程] [ES4封装教程]2.使用 Easy Sysprep v4 封装 Windows XP
(一)备份当前操作系统封装的第一步,其实是备份当前安装好的操作系统.避免我们在之后的步骤中出现问题,以至于还要重新安装操作系统,浪费时间精力.系统备份想必大家都会.对于WinXP而言,建议使用Ghos ...
- 【leetcode】Subsets II
Subsets II Given a collection of integers that might contain duplicates, S, return all possible subs ...
- Java入门的程序汇总
Java入门的基础程序,虽然很简单,也要多练习,下面有重点的总结一下 1.HelloWorld这个不说了 2.常量与变量部分 基本数据类型使用 public class Javashujuleixin ...
- Transfer-Encoding: chunked
Http1.1中 使用 chunked 编码传送时 没有CONTENT_LENGTH,下载之前无法确定要下载的大小. Wininet中已经内嵌该传输协议,要查看chunked块的大小只能socket底 ...
- @SuppressWarnings注解
简介:java.lang.SuppressWarnings是J2SE 5.0中标准的Annotation之一.可以标注在类.字段.方法.参数.构造方法,以及局部变量上.作用:告诉编译器忽略指定的警告, ...
- ORACLE查询当前资产状态,和另一个数据库联查,(查询重复数据中第一条),子查询作为字段查询
背景:ORACLE查询当前资产状态,包含资产信息(表1),资产维修状态(表2),资产报废状态(表3) 如下: 资产信息:
- 有关GPU硬件的理解
1 显卡的DRAM相当于CPU的RAM (Random access memory, 内存). 二者共同的特点是通电的时候才能使用,不正常断电数据就丢失,但正常情况下,会将数据存储到硬盘中.显存又称帧 ...
- Android下利用Bitmap切割图片
在自己自定义的一个组件中由于需要用图片显示数字编号,而当前图片就只有一张,上面有0-9是个数字,于是不得不考虑将其中一个个的数字切割下来,需要显示什么数字,只需要组合一下就好了. 下面是程序的关键代码 ...
- subversion 版本库数据迁移 从一台服务器迁移到另一台新有服务器
[root@NGINX-APACHE-SVN pro]# pwd /var/www/html/svn/pro [root@NGINX-APACHE-SVN pro]# svnadmin dump /v ...