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 相关文章推荐
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
JavaScript闭包详解
Feb 02 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
JS加载解析Markdown文档过程详解
May 19 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设计模式之简单投诉页面实例
2016/02/24 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
react基本安装与测试示例
2020/04/27 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python 装饰器的基本使用
2021/01/13 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
澳大利亚相机之家:Camera House
2017/11/30 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
某某同志考察材料
2014/05/28 职场文书
企业宗旨标语
2014/06/10 职场文书
本科应届生求职信
2014/08/05 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
react 路由Link配置详解
2021/11/11 Javascript