Angularjs angular js google map无法将google事件侦听器用于标记_Angularjs_Google Maps_Google Maps Api 3

Angularjs angular js google map无法将google事件侦听器用于标记

angularjs google-maps google-maps-api-3

Angularjs angular js google map无法将google事件侦听器用于标记,angularjs,google-maps,google-maps-api-3,Angularjs,Google Maps,Google Maps Api 3,我正在测试谷歌地图我可以在地图上添加多个标记，但是我无法为每个标记设置事件侦听器。我只想在用户单击任何标记时将其写入控制台我如何使我的代码工作以下是我的代码： <!DOCTYPE html> <html xmlns:ng="http://angularjs.org/" ng-app="appMaps"> <head> <meta charset="utf-8" /> <title>Angular

我正在测试谷歌地图

我可以在地图上添加多个标记，但是我无法为每个标记设置事件侦听器。我只想在用户单击任何标记时将其写入控制台

我如何使我的代码工作

以下是我的代码：

 <!DOCTYPE html>
    <html xmlns:ng="http://angularjs.org/" ng-app="appMaps">

    <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script src="//maps.googleapis.com/maps/api/js?libraries=weather,geometry,visualization,places&sensor=false&language=en&v=3.17"></script>
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.26/angular.js" data-semver="1.2.26"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script src="http://rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!--css-->
    <style type="text/css">
        html, body, #map_canvas {
            height: 100%;
            width: 100%;
            margin: 0px;
        }

        #map_canvas {
            position: relative;
        }

        .angular-google-map-container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
    </style>
    <script>angular.module('appMaps', ['uiGmapgoogle-maps'])
      .controller('mainCtrl', function($scope) {
    $scope.map = {
      center: {
        latitude: 34.963916,
        longitude: 104.311893
      },
      zoom: 4,
      bounds: {},

    };

    $scope.options = {
      scrollwheel: false
    };
    var createRandomMarker = function(i, bounds, idKey) {
      var lat_min = bounds.southwest.latitude,
        lat_range = bounds.northeast.latitude - lat_min,
        lng_min = bounds.southwest.longitude,
        lng_range = bounds.northeast.longitude - lng_min;

      if (idKey == null) {
        idKey = "id";
      }

      var latitude = lat_min + (Math.random() * lat_range);
      var longitude = lng_min + (Math.random() * lng_range);
      var ret = {
        latitude: latitude,
        longitude: longitude,
        title: 'm' + i
      };
      ret[idKey] = i;
      return ret;
    };
    $scope.randomMarkers = [];
    // Get the bounds from the map once it's loaded
    $scope.$watch(function() {
      return $scope.map.bounds;
    }, function(nv, ov) {
      // Only need to regenerate once
      if (!ov.southwest && nv.southwest) {
        var markers = [];
        for (var i = 0; i < 2; i++) {   
             var ret = {
            latitude:  34.963916,
            longitude: 104.311893,
            title: 'm3',
            id: 1
            };

            var ret2 = {
            latitude:  37.096002,
            longitude: 126.987675,
            title: 'm2',
            id:2
            };
           markers.push(ret);
           markers.push(ret2);

        }
        $scope.randomMarkers = markers;
      }
    }, true);

    $scope.marker = {
        events:{click: console.log('click')},
    }

     });


  </script>
</head>

<body>
    <div id="map_canvas" ng-controller="mainCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds" events = "'map.events'">
        <ui-gmap-markers models="randomMarkers" coords="'self'" icon="'icon'" click="'test'" events = "'events'"></ui-gmap-markers>
    </ui-gmap-google-map>

</div>
<!--example-->
</body>

</html>


安古拉斯普朗克
html，正文，#地图#画布{
身高：100%；
宽度：100%；
边际：0px；
}
#地图画布{
位置：相对位置；
}
.google地图容器{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
}
angular.module（'appMaps'，['uiGmapgoogle-maps']））
.controller（'mainCtrl'，函数（$scope）{
$scope.map={
中心：{
纬度：34.963916，
经度：104.311893
},
缩放：4，
界限：{}，
};
$scope.options={
滚轮：错误
};
var createRandomMarker=函数（i，边界，idKey）{
var lat_min=bounds.southwest.latitude，
纬度范围=边界东北纬度-纬度最小值，
lng_min=bounds.soutwest.longitude，
lng_范围=bounds.northeast.longitude-lng_min；
if（idKey==null）{
idKey=“id”；
}
var纬度=纬度最小值+（Math.random（）*纬度范围）；
var经度=lng_min+（数学随机（）*lng_范围）；
变量ret={
纬度：纬度，
经度：经度，
标题：m'+i
};
ret[idKey]=i；
返回ret；
};
$scope.randomMarkers=[]；
//加载地图后，从地图中获取边界
$scope.$watch（函数（）{
返回$scope.map.bounds；
}，功能（nv，ov）{
//只需要再生一次
如果（！西南偏南和西南偏南）{
var标记=[]；
对于（var i=0；i<2；i++）{
变量ret={
纬度：34.963916，
经度：104.311893，
标题：“m3”，
身份证号码：1
};
变量ret2={
纬度：37.096002，
经度：126.987675，
标题：“m2”，
身份证号码：2
};
推（ret）；
推（ret2）；
}
$scope.randomMarkers=标记；
}
}，对）；
$scope.marker={
事件：{click:console.log（'click'）}，
}
});

今天晚些时候，我将进一步探讨这一点。目前我能想到的一种方法是将

中的

click

参数设置为调用

console.log（）

的有效JS函数

在我的例子中，我创建了

click=“onClick”

，然后定义了以下函数：

$scope.onClick = function onClick() {
console.log("click");}

点击谷歌地图上的事件

我不知道angular中的map api，但我有一些建议
您可以将map api与画布一起使用，您可以在画布元素上提供ng click事件
代码在这里
站点：
jsfiddle.net/xSPAA/536/