javascript 在 ngMap 中使用事件侦听器

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28753812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 09:29:58  来源:igfitidea点击:

Using Event listeners with ngMap

javascriptgoogle-mapsgoogle-maps-api-3ng-map

提问by Jay

I'm using Allenhwkim's wonderful ngMap in a project. I know that I need to use Maps Javascript v3 API to manipulate the map, which is going well except that I can't get any event listeners, e.g., $google.maps.event.addListener(markers[i], 'click', function()...to work

我在一个项目中使用 Allenhwkim 的精彩 ngMap。我知道我需要使用 Maps Javascript v3 API 来操作地图,这很顺利,只是我无法获得任何事件侦听器,例如,$google.maps.event.addListener(markers[i], 'click', function()...工作

Specifically, I'm trying to create an onClick event on my markers. Here's an example: http://plnkr.co/edit/HAcEfWl5LR9SGGqbcXcW?p=preview

具体来说,我试图在我的标记上创建一个 onClick 事件。这是一个例子:http: //plnkr.co/edit/HAcEfWl5LR9SGGqbcXcW?p=preview

Here, I try to use an ng-click attribute on a marker directive. Still, I get nothing. http://plnkr.co/edit/FqwNhqEgDe75il8nU0sC?p=preview

在这里,我尝试在标记指令上使用 ng-click 属性。尽管如此,我什么也得不到。http://plnkr.co/edit/FqwNhqEgDe75il8nU0sC?p=preview

回答by ztan

You can use ngMap's specific UI event methods.

您可以使用 ngMap 的特定 UI 事件方法。

Check out this documentation: https://ngmap.github.io/events.html#/event-simple#event-simple

查看此文档:https: //ngmap.github.io/events.html#/event-simple#event-simple

also sample code:

还有示例代码:

HTML:

HTML:

<div ng-controller="EventSimpleCtrl" class="ng-scope">
      <map zoom="4" center="-25.363882, 131.044922" on-center-changed="centerChanged()">
        <marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"></marker> 
      </map>
    </div>

JavaScript:

JavaScript:

 $scope.click = function(event) {
      map.setZoom(8);
      map.setCenter(marker.getPosition());
    }

Sample code link: http://plnkr.co/edit/mli6jTMwGE9k35GFPZT9?p=preview

示例代码链接:http: //plnkr.co/edit/mli6jTMwGE9k35GFPZT9?p=preview

Edit:

编辑:

You can use google.maps.event.addListener, but you need to create variables to hold your marker, and add the listeners to the markers.

您可以使用google.maps.event.addListener,但您需要创建变量来保存标记,并将侦听器添加到标记中。

You can change the code in your script.js to the following:

您可以将 script.js 中的代码更改为以下内容:

var app = angular.module('myApp', ['ngMap']);

  app.controller('mapController', function($scope, $http, $interval) {
    var map;
    $scope.dynMarkers = [];
    $scope.$on('mapInitialized', function(event, evtMap) {
      map = evtMap;
      for (var i=0; i<1000; i++) {
        var latLng = new google.maps.LatLng(markers[i].position[0], markers[i].position[1]);
        var marker = new google.maps.Marker({position:latLng});
        $scope.dynMarkers.push(marker);

        google.maps.event.addListener(marker, 'click', function() {

            alert("this is marker " + i);
        });

      }
      $scope.markerClusterer = new MarkerClusterer(map, $scope.dynMarkers, {});
    });
  });

Notice this line var marker = new google.maps.Marker({position:latLng});You can try in this link: http://plnkr.co/edit/LiblBBvauGnn67xOy96D?p=preview

请注意这一行var marker = new google.maps.Marker({position:latLng});您可以在此链接中尝试:http: //plnkr.co/edit/LiblBBvauGnn67xOy96D?p=preview