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 相关文章推荐
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
vue实现点击隐藏与显示实例分享
Feb 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
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
深入解析Python编程中super关键字的用法
2016/06/24 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
基于python实现聊天室程序
2018/07/27 Python
浅析Python四种数据类型
2018/09/26 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
专业求职信撰写要诀
2014/02/18 职场文书
社区党务公开实施方案
2014/03/18 职场文书
专业技术职务聘任书
2014/03/29 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
复试通知单模板
2015/04/24 职场文书
化验室安全管理制度
2015/08/06 职场文书
四年级语文教学反思
2016/03/03 职场文书