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实现图片左右自动滚动示例
Sep 25 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
javascript操作cookie
Jan 17 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 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
php生成shtml类用法实例
2014/12/09 PHP
php简单防盗链实现方法
2015/07/29 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
php使用正则验证中文
2016/04/06 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
乔迁之喜主持词
2014/03/27 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers
python语言中pandas字符串分割str.split()函数
2022/08/05 Python