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 获取和设置Select选项的代码
Feb 07 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
js实现表格数据搜索
Aug 09 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截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
低版本中Python除法运算小技巧
2015/04/05 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
Python代码实现KNN算法
2017/12/20 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
学校大课间活动方案
2014/01/30 职场文书
业务总经理岗位职责
2014/02/03 职场文书
求职自我评价范文100字
2014/09/23 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
java多态注意项小结
2021/10/16 Java/Android