Google 地图事件实例讲解


Posted in Javascript onAugust 06, 2016

Google 地图事件

点击标记缩放地图

我们仍然使用上一遍文章使用的英国伦敦的地图。

点用户点击标记时实现缩放地图的功能(点击标记时绑定地图缩放事件)。

代码如下:

<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() 事件处理程序来注册事件的监听。该方法使用一个对象,一个事件来监听,当指定的事件发生时 函数将被调用。

重置标记

我们通过给地图添加事件处理程序来改变 '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>

点击标记时打开信息窗口。

点击标记在信息窗口显示一些文本信息:

实例

<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>

设置标记及打开每个标记的信息窗口

当用户点击地图时执行一个窗口

用户点击地图某个位置时使用 placeMarker() 函数在指定位置上放置一个标记,并弹出信息窗口:

实例

<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 地图事件的基础知识整理,后续继续补充相关知识,谢谢大家对本站的支持!

Javascript 相关文章推荐
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
Node.js文件操作详解
Aug 16 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
JS匿名函数实例分析
Nov 26 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
jQuery常用选择器详解
Jul 17 jQuery
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
Google 地图叠加层实例讲解
Aug 06 #Javascript
Google Maps基础及实例解析
Aug 06 #Javascript
浅谈js的html元素的父节点,子节点
Aug 06 #Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 #Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 #Javascript
Google 地图获取API Key详细教程
Aug 06 #Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 #Javascript
You might like
一个程序下载的管理程序(一)
2006/10/09 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
javascript event 事件解析
2011/01/31 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
python中的列表推导浅析
2014/04/26 Python
Python sys.argv用法实例
2015/05/28 Python
Python判断字符串与大小写转换
2015/06/08 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
python中count函数知识点浅析
2020/12/17 Python
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
六个一活动实施方案
2014/03/21 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
本科应届生求职信
2014/08/05 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
幼师大班个人总结
2015/02/13 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
道歉信范文
2015/05/12 职场文书
工作简报怎么写
2015/07/21 职场文书
教师远程研修感悟
2015/11/18 职场文书