Angular-google-maps：圆形对象点击事件，如何在点击事件上向控制器发送信息？

Question

我正在尝试设置 angular-google-maps -display。我有如下对象用作标记模型：

<ui-gmap-google-map center='map.center' zoom='map.zoom'>
  <ui-gmap-markers
    models="myObjects"
    coords="'self'"
    icon="'icon'"
    idkey="'id'"
    click="mapPinClick">
  </ui-gmap-markers>
</ui-gmap-google-map>

作为一个图标，我目前正在使用橙色圆圈 .png 在地图上显示所选对象。这种方法的优点：

• 由于 'models' 属性，点击事件会发送我可以在控制器中轻松使用的模型。

• 我计划在某个时候添加自定义集群功能，并且该指令似乎直接支持此类功能（虽然很小）。

缺点：

• 放大和缩小时，图标相互重叠。

• 标记的位置略高于实际坐标，就像默认的谷歌地图标记一样。我希望它们位于我的对象的确切坐标上。

作为一种解决方法，我尝试使用谷歌地图圈：

<ui-gmap-google-map center='map.center' zoom='map.zoom'>
  <ui-gmap-circle 
    ng-repeat="object in myObjects"
    radius="15"
    stroke="{color: '#DF6C0A', weight: 1, opacity: 1.0}"
    fill="{color: '#DF6C0A', opacity: 0.8}"
    center="{latitude: object.latitude, longitude: object.longitude}"
    events="{ click: mapPinClick }"
    clickable=true>
  </ui-gmap-circle>
</ui-gmap-google-map>

使用这种方法，利弊似乎颠倒了：圆圈大小根据缩放级别进行缩放并且它们被准确定位，但我无法访问 object 的模型属性，就像在以前的方法，我担心使用这种方法可能更难以实现集群功能。

由于集群不是我的首要任务，如果我可以通过点击事件以某种方式将有关 object 的信息传输到我的控制器，我很乐意使用循环方法。我尝试包含一个自定义属性，例如

customAttribute="object.information"

和console.log()：对click事件附带的所有参数进行检查，以查看该属性是否包含在其中一个中，但根本没有显示出来。我还尝试将对象包含为单击事件的参数，例如

events="{ click: mapPinClick(object) }"

但最终以某种方式一遍又一遍地调用 click 函数，基本上使我的应用程序崩溃。

任何关于如何从这里继续的建议将不胜感激。

Answer 1

这可能现在已经解决了，但是我今天遇到了这个问题，所以我想我会分享我是如何解决的。

问题在于 Google Maps 事件侦听器不返回对原始对象的引用。

为了让点击事件与您的对象进行交互，您需要使用事件侦听器对象来实例化该对象。类似于以下内容：

var vm = this;
vm.myObjects = [];
var newObj = {};
var sum = 0;

function logIdx() {
  console.log(newObj.idx);
  sum += newObj.idx;
  console.log(sum);
}

for(var i=1; i<25; i++) {

  newObj = {
    idx: i,
    events: {
      click: logIdx
    }
  };

  vm.myObjects.push(newObj);

}

请注意，newObj.events 参数的名称与 Google 地图事件侦听器名称相匹配。

在您的 HTML 中，您将执行以下操作：

<ui-gmap-google-map center='vm.map.center' zoom='vm.map.zoom'>
  <ui-gmap-circle 
    ng-repeat="object in vm.myObjects"
    radius="15"
    stroke="{color: '#DF6C0A', weight: 1, opacity: 1.0}"
    fill="{color: '#DF6C0A', opacity: 0.8}"
    center="{latitude: object.latitude, longitude: object.longitude}"
    events="object.events"
    clickable=true>
  </ui-gmap-circle>
</ui-gmap-google-map>

我建议将尽可能多的逻辑移出 HTML 并将其放入 JS 中。例如，您可以将整个 center 对象放入您的 myObjects 对象中。