javascript - Angular-google-maps:圆形对象点击事件，如何在点击事件上向 Controller 发送信息？

Question

我正在尝试设置 angular-google-maps 显示。我有用作标记模型的对象，如下所示:

<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 在 map 上显示所选对象。这种方法的优点:

• 由于“models”属性，点击事件会发送我可以在 Controller 中轻松使用的模型。

• 我计划在某个时候添加自定义集群功能，并且该指令似乎提供了对此的直接支持(尽管是次要的)。

缺点:

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

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

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

<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>

使用这种方法，优点和缺点似乎颠倒过来:圆圈大小根据缩放级别进行缩放，并且它们的位置准确，但我无法访问对象的模型属性就像我在之前的方法中所做的那样，我担心使用这种方法实现集群功能可能会更困难。

由于集群问题不是我的首要任务，如果我能通过点击事件将有关对象的信息传输到我的 Controller ，我很乐意使用循环方法。我尝试包含一个自定义属性，例如

customAttribute="object.information"

和console.log():检查点击事件附带的所有参数，以查看该属性是否包含在其中之一中，但它根本没有显示。我还尝试将对象作为单击事件的参数包含在内，例如

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

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

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

Answer 1

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

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

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

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 map 事件监听器名称相匹配。

在 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 对象中。