AngularJS Google Map Marker事件不起作用

Question

我用过ui google map。 标记事件不起作用，我正在使用此http://angular-ui.github.io/angular-google-maps/#!/api/marker视图侧：

 <ui-gmap-markers models="mapResult" fit="true" idkey="mapResult.id" coords="'form_geo'" click="'onclick'"  events="mapResult.events"  >

                                    <ui-gmap-windows show="show" closeClick="closeClick()">
                                         <div ng-controller="MapsDemoCtrl" ng-non-bindable>

                                                <span style="color:#000;font-weight:bold;">
                                                     Formname :  <a href='#/formspostview/{{id}}' style="color:#000;">
                                                                    {{form_name}}
                                                                 </a><br>
                                                     Username :   {{user_name}}<br>

                                                     Date     :   {{createdAt | date: "MM/dd/yyyy H:mm"}}<br>      
                                                </span>   

                                      </div>
                                    </ui-gmap-windows>
                                </ui-gmap-markers>

控制器端：

$scope.onclick = function () {
    // check if there is query in url
    // and fire search in case its value is not empty
    console.log("hai");
};

你能帮助我吗？ 如何使用标记事件？

Answer 1

以下示例演示了如何通过ui-gmap-markers指令将click事件处理程序附加到标记：

$scope.map.markersEvents = {
      click: function (marker, eventName, model, args) {
          //...
      }
};

哪里

<ui-gmap-markers models="map.markers" coords="'coords'" icon="'icon'" options="'options'" events="map.markersEvents">          
</ui-gmap-markers>

工作实例

 angular.module('appMaps', ['uiGmapgoogle-maps']) .controller('mainCtrl', function ($scope, $log) { $scope.map = { center: { latitude: 40.1451, longitude: -99.6680 }, zoom: 4, markers: [ { id: 0, showWindow: false, city: 'New York', coords: { latitude: 40.710355, longitude: -74.001839 } }, { id: 1, showWindow: false, city: 'San Francisco', coords: { latitude: 37.775404, longitude: -122.437600 } }] }; $scope.options = { }; $scope.map.markersEvents = { click: function (marker, eventName, model, args) { logMarkerInfo(marker); } }; var logMarkerInfo = function(marker){ var pos = marker.getPosition(); document.getElementById('output').innerHTML += "Marker (" + pos.lat() + "," + pos.lng() + ")"; }; });

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

 <html xmlns:ng="http://angularjs.org/" ng-app="appMaps"> <script src="https://code.angularjs.org/1.3.14/angular.js"></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/2.0.X/dist/angular-google-maps.js"></script> <div id="map_canvas" ng-controller="mainCtrl"> <ui-gmap-google-map center="map.center" zoom="map.zoom" options="options"> <ui-gmap-markers models="map.markers" coords="'coords'" icon="'icon'" options="'options'" events="map.markersEvents"> <ui-gmap-windows show="map.showWindow" closeclick="'closeClick'" > <div ng-non-bindable>{{ city }}</div> </ui-gmap-windows> </ui-gmap-markers> </ui-gmap-google-map> </div> <div id="output"/>

Answer 2

您也可以这样操作：（需要在控制器上注入$ interval）

var ctrl = this;

var count = 1;

var clock;

ctrl.map;

var lat = -23.56;

var long = -46.65;

// Start Hold To Mark Controller
var startCount = function(event){
  count = 1;
  if ( angular.isDefined(clock) ) return;
  clock = $interval(function() {
    if(count > 0){
      count = count - 1;
    } else{
      addMarker(event.latLng);
      stopCount();
    }
  }, 500);
};

var stopCount = function(){
  if (angular.isDefined(clock)) {
    $interval.cancel(clock);
    clock = undefined;
  }
};

$scope.$on('$destroy', function() {
  stopCount();
});
// End Hold To Mark Controller

// Start GoogleMaps Map Controller
function initMap() {
  if(lat == null || long == null){
    var center = { lat: -23.56, lng: -46.65 };
  } else{
    var center = { lat: lat, lng: long };
  }

  ctrl.map = new google.maps.Map(document.getElementById('map'), {
    disableDefaultUI: true,
    zoom: 12,
    center: center
  });

  google.maps.event.addListener(ctrl.map, 'mousedown', function(event) {
    startCount(event);
  });

  google.maps.event.addListener(ctrl.map, 'mouseup', function(event) {
    stopCount();
  });

  google.maps.event.addListener(ctrl.map, 'dragstart', function(event) {
    stopCount();
  });
};

function addMarker(location) {
  var marker = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    draggable: true,
    position: location,
    map: ctrl.map
  });
  markers.push(marker);
};

initMap();
// End GoogleMaps Map Controller

1秒钟后，它将在该位置上标记，如果您在此时间之前移开手指或将其移动，则不会创建标记。

AngularJS Google Map Marker事件不起作用

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-10-18 21:52:23

解决方案2
0 2015-10-22 16:05:04

AngularJS Google Map Marker事件不起作用

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-10-18 21:52:23

解决方案2 0 2015-10-22 16:05:04

解决方案1
0 已采纳 2015-10-18 21:52:23

解决方案2
0 2015-10-22 16:05:04