Question

我使用过ui谷歌地图。标记事件不起作用我正在使用这个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

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

$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谷歌地图标记事件无法正常工作

2 个答案: