[英]How to listen to multiple DOM events in Google map at the same time?
I am showing a Google map in one of my websites. 我在我的某个网站上展示了Google地图。 And when bounds are changes in the Google map, I do some calculations.
当Google地图中的边界发生变化时,我会进行一些计算。 I calculate the coordinate values & store them in four separate textboxes.
我计算坐标值并将它们存储在四个单独的文本框中。 I am able to do that.
我能够做到这一点。
Presently, I am doing this only on bounds_changed
event of the map. 目前,我只在地图的
bounds_changed
事件上执行此操作。 I want to perform the same operation in the following events also: 我想在以下事件中执行相同的操作:
How to do this? 这该怎么做? I am not much familiar with JavaScript.
我对JavaScript不太熟悉。 I don't even know whether such a thing is possible or not?
我甚至不知道这样的事情是否可能? What changes should I make to the source code.
我应该对源代码做出哪些更改。
I have included a fiddle . 我加了一个小提琴 。 But it does not work.
但它不起作用。 It's just to show the code.
它只是为了显示代码。
I took help from this page . 我从这个页面获得了帮助。
HTML Code: 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 Code: 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;
});
}
There's no direct way to use multiple events. 没有直接的方法来使用多个事件。 Move the common function to a new function:
将公共函数移动到新函数:
function common(){
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
....
}
add a new function to bind to an event: 添加一个新函数来绑定到一个事件:
function bind(eventName){
google.maps.event.addListener(map, eventName, function (){
common();
});
}
then add your events: 然后添加你的活动:
bind('zoom_changed');
bind('center_changed');
bind('tilesloaded');
bind('idle');
....
I don't think there is any native support for that. 我认为没有任何原生支持。 The closest thing I can think of:
我能想到的最接近的事情:
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...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.