【问题标题】:marker click event not firing second time in google maps标记单击事件未在谷歌地图中第二次触发
【发布时间】:2015-07-13 23:43:30
【问题描述】:

我正在使用 ui-gmap-google-map AngularJs 指令和 ui-gmap-marker 标记带有 ng-repeat 和单击事件调用控制器中的函数。 一切似乎都奏效了。当我单击每个标记时,地图会首次加载所有标记的标记和标记单击触发。但是从第二次尝试对任何标记进行点击都不会触发点击事件。

这里是代码sn-ps

<ui-gmap-google-map center="map.center" zoom="map.zoom">
    <!--<ui-gmap-markers models="map.markers" fit="true" coords="'self'" icon="'icon'" idkey="map.marker.id" click="selectMarker()">-->
    <ui-gmap-markers models="map.markers" fit="true" coords="'self'" icon="'icon'" idkey='m.id'>
        <ui-gmap-marker ng-repeat="m in map.markers" coords="m" icon="m.icon" ng-click='onMarkerClicked(m.sequenceId)' idkey='m.id'>

        </ui-gmap-marker>
    </ui-gmap-markers>
</ui-gmap-google-map>

..... 'click' 和 'ng-click' 事件的结果相同 ..

$scope.generateMarkers = function (referencePoints) {
            $scope.map.markers.length = 0;
            //var bounds = new google.maps.LatLngBounds();
            for (i = 0; i < referencePoints.length; i++) {
                var record = referencePoints[i];
                var marker = {
                    latitude: record.Lat,
                    longitude: record.Long,
                    title: record.RoadName,
                    id: record.ID,
                    icon: { url: '/content/images/roundcyan.png' },//pin_url(record.ID)//
                    sequenceId:i
                };
                //var position = new google.maps.LatLng(record.Lat,record.Long);
                //bounds.extend(position);
                $scope.map.markers.push(marker);
            }
            //$scope.map.fitBounds(bounds);

        };

.... ..

$scope.onMarkerClicked = function (sequenceId) {
    if ($scope.selectedSequenceId >=0) {
        $scope.map.markers[$scope.selectedSequenceId].icon = { url: 'http://localhost:xxxxx/content/images/roundcyan.png' };
    }
    $scope.selectedSequenceId = sequenceId;
    $scope.map.markers[sequenceId].icon = { url: 'http://localhost:xxxxx/content/images/roundcyanplus.png' };
    $scope.$apply();
};

【问题讨论】:

  • 使用的版本是;版本:AngularJS v1.2.8,angular-google-maps 2.1.0
  • 我猜你的sequenceId 有问题。看看将sequenceId:i++ 放入ng-click 是否可以解决问题。

标签: javascript angularjs google-maps-api-3 google-maps-markers angular-google-maps


【解决方案1】:

你可能不得不取消事件传播

ng-click="onMarkerClicked(); $event.stopPropagation()"

【讨论】:

  • 在函数之前或之后就像我在示例中给出的那样
猜你喜欢
  • 2015-02-06
  • 1970-01-01
  • 1970-01-01
  • 2014-08-03
  • 2011-10-11
  • 1970-01-01
  • 2011-01-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多