Google Maps API V3：类上的事件侦听器 [英] Google Maps API V3 : event listener on a class
问题描述
例如，可以使用Google Maps V3 API检测事件（例如1）：
google.maps .event.addListener（'drag'，function（event）{
$（＃latD）.val（event.latLng.lat（））;
$（＃longD）.val （event.latLng.lng（））;
}）;
或（ex 2）
google.maps.event.addListener（markerDep，'drag'，function（event）{
$（＃latD）。val（event.latLng.lat（））;
$（＃longD）。val（event.latLng.lng（））;
}）;
在这里，我指定了一个Marker实例。
$ b $根据Google Maps API规范，可以在特定事件上创建侦听器（示例1），甚至可以为特定实例上的特定事件创建侦听器（示例2）。
但是是否可以为同一个班的所有实例检测同一事件？例如，我可以在Marker的所有实例上检测到dragend事件吗？
谢谢
如果您有多个标记并正在尝试为每个标记创建一个事件，在这种情况下 dragend 事件，您需要将它包含在 for 循环中，该循环会生成标记。被拖动后标记的经度和纬度。这些值会被插入到地图下方的输入框中。
#map {height：250px;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery /2.1.1/jquery.min.js\"></script><div id =map>< / div>< input id =latDtype =text><输入id =longDtype =text>< script> //下面的地图创建复杂的标记以指示目的地//注意锚点被设置为（0,32）以对应于图元的底部函数initMap（）{var map = new google.maps.Map（document.getElementById（'map'），{zoom：2，scrollwheel：false，navigationControl：false，mapTypeControl：false，scaleControl：false，draggable：true，中心：{lat：-2.75181，lng：24.11768}}）; setMarkers（地图）; } //标记的数据由一个名称，一个LatLng和一个zIndex组成，这些标记应该相互显示的顺序var destinations = [[''Congo'，-2.72760,23.52084,1]， ['南非'，-33.58880,20.07114,1]，['巴西'，-6.26352，-57.38128,1]];函数setMarkers（map）{//向地图添加标记。 //标记大小表示为X，Y的大小，其中图像的原点//（0,0）位于图像的左上角。 //标记的起点，锚点位置和坐标在X //方向向右和向下Y方向增加。 var image = {url：'http://i.imgur.com/OG4CZt3.png'，//这个标记是32像素宽，32像素高。 size：new google.maps.Size（32，32），//这张图片的原点是（0，0）。 origin：new google.maps.Point（0，0），//此图片的锚点偏离中心（0，10）。 anchor：new google.maps.Point（0，10）}; //形状定义图标的可点击区域。该类型定义了一个HTML //< area>元素'poly'将多边形描绘为一系列X，Y点。 //最后一个坐标通过连接到第一个坐标来关闭poly。 var shape = {coords：[1，1，1，32，30，32，30，1]，键入：'poly'}; for（var i = 0; i< destinations.length; i ++）{var destination = destinations [i]; var marker = new google.maps.Marker（{position：{lat：destination [1]，lng：destination [2]}，map：map，draggable：true，icon：image，shape：shape，animation：google.maps .Animation.DROP，title：destination [0]，zIndex：destination [3]，}）; （this.getPosition（）。lat（））; jQuery（＃longD）。val（this.getPosition（）。lng） （））;}）; }}< / script>< script async defer src =https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap>< / script> $ b
/developers.google.com/maps/documentation/javascript/examples/icon-complexrel =nofollow> 在文档中
It is possible to detect an event with Google Maps V3 API, for instance (ex 1) :
google.maps.event.addListener('drag', function(event) {
$("#latD").val(event.latLng.lat());
$("#longD").val(event.latLng.lng());
});
or (ex 2)
google.maps.event.addListener(markerDep, 'drag', function(event) {
$("#latD").val(event.latLng.lat());
$("#longD").val(event.latLng.lng());
});
here, I specified an instance of a Marker.
According to Google Maps API Specification, one can create a listener on a particular event (example 1), and even create a listener for a particular event on a particular instance (example 2).
But is it possible to detect the same event for all the instances of a same class ? For instance, can i detect a "dragend" event on all the instances of Marker ?
Thanks
If you have got multiple markers and are trying to create an event for each each marker, in this case the dragend event, you would need to include it in the for loop which generates your markers.
The snippet below assumes you are trying to get the longitude and latitude of a marker after it has been dragged. These values get inserted into the input boxes below the map.
#map {
height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map"></div>
<input id="latD" type="text">
<input id="longD" type="text">
<script>
// The following map creates complex markers to indicate destinations
// Note that the anchor is set to (0,32) to correspond to the base of the iamge.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: true,
center: {lat: -2.75181, lng: 24.11768}
});
setMarkers(map);
}
// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other
var destinations = [
['Congo', -2.72760, 23.52084, 1],
['South Africa', -33.58880, 20.07114, 1],
['Brazil', -6.26352, -57.38128, 1]
];
function setMarkers(map) {
// Adds markers to the map.
// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.
// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
var image = {
url: 'http://i.imgur.com/OG4CZt3.png',
// This marker is 32 pixels wide by 32 pixels high.
size: new google.maps.Size(32, 32),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is just off centre (0, 10).
anchor: new google.maps.Point(0, 10)
};
// Shapes define the clickable region of the icon. The type defines an HTML
// <area> element 'poly' which traces out a polygon as a series of X,Y points.
// The final coordinate closes the poly by connecting to the first coordinate.
var shape = {
coords: [1, 1, 1, 32, 30, 32, 30, 1],
type: 'poly'
};
for (var i = 0; i < destinations.length; i++) {
var destination = destinations[i];
var marker = new google.maps.Marker({
position: {lat: destination[1], lng: destination[2]},
map: map,
draggable: true,
icon: image,
shape: shape,
animation: google.maps.Animation.DROP,
title: destination[0],
zIndex: destination[3],
});
marker.addListener('dragend', function() {
jQuery("#latD").val(this.getPosition().lat());
jQuery("#longD").val(this.getPosition().lng());
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap"></script>
More information in the docs
这篇关于Google Maps API V3：类上的事件侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
