如何使用带有Google Map API v3的event.addListener来获取被触发的标记 [英] How to get the fired marker using event.addListener with Google Map API v3

问题描述

我有一个简单的 Google Map ，其中一些标记添加了循环的json对象。

我试图在所有这些标记中添加一个 listener 来做一个简单的动作（改变旋转）。标记被添加到地图上并且侦听器被调用，但是当我点击其中一个标记时，动作始终在最新添加的位置上执行。

我怎样才能得到被解雇的标记？我认为方法是使用监听器函数的 evt 参数，但我不知道如何。

以下是代码：

<$ p $ for（var i in _points）{

_markers [i] = new google.maps.Marker（{

position：{
lat：parseFloat（_points [i] ._ google_lat），
lng：parseFloat（_points [i] ._ google_lon）
}，

图标：{
path：google.maps.SymbolPath.FORWARD_CLOSED_ARROW，
scale：3，
rotation：parseInt（_points [i] ._ rotation）
}，

map：_map ，

title：_points [i] ._ obj_id
}）;

google.maps.event.addListener（_markers [i]，'click'，function（evt）{

//console.log (evt）;

r = _markers [i] .icon.rotation;

_markers [i] .setIcon（{
path：google.maps.SymbolPath.FORWARD_CLOSED_ARROW，
scale ：3，
轮换：r + 15
}）;
}）;

$ b $ / code>

解决方案

code>这个里面的click监听器函数是对标记的引用：

  google .maps.event.addListener（_markers [i]，'click'，function（evt）{
 //console.log (evt）; 
r = this.getIcon（）。rotation; 
 this.setIcon（{
 path：google.maps.SymbolPath.FORWARD_CLOSED_ARROW，
 scale：3，
 rotation：r + 15 
}）; 
}） ; 
  

概念证明小提琴

程式码片段：

 函数initMap（）{//创建一个地图并将其居中于曼哈顿。 var _map = new google.maps.Map（document.getElementById（'map'），{zoom：10，center：{lat：40.771，lng：-73.974}}）;对于（var i in _points）{_markers [i] = new google.maps.Marker（{position：{lat：parseFloat（_points [i] ._ google_lat），lng：parseFloat（_points [i] ._ google_lon）}，icon ：{path：google.maps.SymbolPath.FORWARD_CLOSED_ARROW，scale：3，rotation：parseInt（_points [i] ._ rotation）}，map：_map，title：_points [i] ._ obj_id}）; google.maps.event.addListener（_markers [i]，'click'，function（evt）{r = this.getIcon（）。rotation; this.setIcon（{path：google.maps.SymbolPath.FORWARD_CLOSED_ARROW，scale：3 ，rotation：r + 15}）;}）; }} google.maps.event.addDomListener（window，load，initMap）; var _markers = []; var _points = [{_google_lat：40.7127837，_google_lon：-74.0059413，_obj_id：A，_rotation：0}， {_google_lat：40.735657，_google_lon：-74.1723667，_obj_id：B，_rotation：90}]  

  html，body，＃map {height：100％;保证金：0; padding：0;}  

< script src =https ：

：

>

I have a simple Google Map with some markers added looping on a json object.

I'm trying to add a listener to all of these markers to do a simple action (change the rotation). Markers are added on map and listener is called, but when i click on one of the markers, the action is performed always on the latest added.

How I can get the fired marker? I think that the way is to use the evt parameter of the listener function, but I don't know how.

I watched inside the evt parameter with firebug but without results.

Here is the code:

for(var i in _points){

    _markers[i] = new google.maps.Marker({

        position: {
            lat: parseFloat(_points[i]._google_lat),
            lng: parseFloat(_points[i]._google_lon)
        },

        icon: {
            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
            scale: 3,
            rotation: parseInt(_points[i]._rotation)
        },

        map: _map,

        title: _points[i]._obj_id
    });

    google.maps.event.addListener(_markers[i], 'click', function(evt){

        //console.log(evt);

        r = _markers[i].icon.rotation;

        _markers[i].setIcon({
             path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
             scale: 3,
             rotation: r+15
        });
     });

}

解决方案

The this inside the click listener function is a reference to the marker:

google.maps.event.addListener(_markers[i], 'click', function(evt){
    //console.log(evt);
    r = this.getIcon().rotation;
    this.setIcon({
         path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
         scale: 3,
         rotation: r+15
    });
 });

proof of concept fiddle

code snippet:

function initMap() {

  // Create a map and center it on Manhattan.
  var _map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {
      lat: 40.771,
      lng: -73.974
    }
  });

  for (var i in _points) {

    _markers[i] = new google.maps.Marker({

      position: {
        lat: parseFloat(_points[i]._google_lat),
        lng: parseFloat(_points[i]._google_lon)
      },
      icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 3,
        rotation: parseInt(_points[i]._rotation)
      },
      map: _map,
      title: _points[i]._obj_id
    });

    google.maps.event.addListener(_markers[i], 'click', function(evt) {

      r = this.getIcon().rotation;

      this.setIcon({
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 3,
        rotation: r + 15
      });
    });

  }
}

google.maps.event.addDomListener(window, "load", initMap);

var _markers = [];
var _points = [{
  _google_lat: 40.7127837,
  _google_lon: -74.0059413,
  _obj_id: "A",
  _rotation: 0
}, {
  _google_lat: 40.735657,
  _google_lon: -74.1723667,
  _obj_id: "B",
  _rotation: 90
}]

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

这篇关于如何使用带有Google Map API v3的event.addListener来获取被触发的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！