如何在谷歌地图中同时监听多个DOM事件
How to listen to multiple DOM events in Google map at the same time?
我在我的一个网站上显示了一张谷歌地图。当边界在谷歌地图上发生变化时,我会做一些计算。我计算坐标值&将它们存储在四个单独的文本框中。我能做到。
目前,我只在地图的bounds_changed
事件上这样做。我也想在以下事件中执行相同的操作:
- 缩放更改
- center_changed
- 加载的瓷砖
- 空闲
- 拖动
- 拖拉
- 拖动启动
如何做到这一点?我对JavaScript不太熟悉。我甚至不知道这样的事情是否可能?我应该对源代码进行哪些更改。
我有一把小提琴。但它不起作用。这只是为了显示代码。
我从这个页面得到了帮助。
HTML代码:
<div id="googleMap" style="width:900px;height:500px;">
</div>
<input type="text" id="north" name="north">
<input type="text" id="east" name="east">
<input type="text" id="west" name="west">
<input type="text" id="south" name="south">
JavaScript代码:
function loadScript()
{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
function initialize()
{
var myLatlng=new google.maps.LatLng(-25.363882, 131.044922);
var mapProp =
{
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom:6,
maxZoom: 8,
minZoom:2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var image = 'mapmarkers/you-are-here-2.png';
var marker = new google.maps.Marker
({
position: myLatlng,
map: map,
title: 'I am Here.',
icon: image,
tooltip: '<B>This is a customized tooltip</B>'
});
google.maps.event.addListener(map, 'bounds_changed', function ()
{
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var getcentre=bounds.getCenter();
var ne = map.getBounds().getNorthEast();
var sw = map.getBounds().getSouthWest();
var centre_lat=getcentre.lat();
var centre_long=getcentre.lng();
var myLatlng=new google.maps.LatLng(centre_lat,centre_long);
var mapProp =
{
center: new google.maps.LatLng(centre_lat,centre_long),
zoom:6,
maxZoom: 8,
minZoom:2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var north2=ne.lat();
var east2=ne.lng();
var south2=sw.lat();
var west2=sw.lng();
document.getElementById("north").value = north2;
document.getElementById("east").value = east2;
document.getElementById("west").value = west2;
document.getElementById("south").value = south2;
});
}
没有直接的方法可以使用多个事件。将通用功能移到新功能:
function common(){
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
....
}
添加一个新函数以绑定到事件:
function bind(eventName){
google.maps.event.addListener(map, eventName, function (){
common();
});
}
然后添加您的事件:
bind('zoom_changed');
bind('center_changed');
bind('tilesloaded');
bind('idle');
....
我认为没有任何本地支持。我能想到的最接近的东西:
function addEventListeners(map, target, events, fn) {
for (var i=0; i < events.length; i++)
target.addListener(map, events[i], fn);
}
addEventListeners(map,
google.maps.event,
['zoom_changed', 'bounds_changed'], // list your events
theFunc); // function to execute
function theFunc(){
var bounds = map.getBounds(); // etc...
}
相关文章:
- 如何在AngularJS中监听点击事件,而不是触摸事件
- BackboneJS-监听嵌套的模型更改
- 在Firefox restartless插件中,当一个新窗口打开时,我如何运行代码(监听窗口打开)
- 监听touchend有时会触发移动点击事件
- 使用ajax的Django jquery.如何让jquery监听id's生成的表单
- JQuery监听点击并使用点击元素发出警报's href
- jQuery有没有,或者有没有jQuery插件,内置了监听CSS3动画事件的功能(例如animationEnd)
- 如何让Google Maps API v3监听dragend事件并在投递时填充表单字段
- 如何在angular js中监听dom就绪事件
- Phonegap:监听页面并关闭InAppBrowser返回index.html的简单方法
- React鼠标事件在没有监听它们的组件上触发
- 监听发布到网站的广告的新网址
- 我应该使用什么模式在 Node/JavaScript 中制作监听机器人
- 如何在具体化 CSS 中监听<选择>更改事件
- 如何在谷歌地图中同时监听多个DOM事件
- 从DOM元素上的事件监听切换
- 监听DOM元素何时被移动
- 监听DOM初始加载后呈现的元素
- 监听DOM事件(特定属性)
- 在AngularJS中监听事件和操作DOM(编译、链接)的地方