Question

我正在构建一个需要谷歌地图的混合应用程序，因为我使用角度更方便我使用ng-map。

我对标记的点击事件有一些问题

<marker position="{{m.center}}" ng-repeat="m in markers" on-click="selectRequest(m)" icon="images/marker-{{m.status}}.png"></marker>

使用鼠标在桌面上工作正常但在手机上没有触摸事件。

为什么？

Answer 1

感谢上面的 SSH 评论，我完成了这个：

$scope.requests.forEach(function(elem) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng(elem.latitude, elem.longitude),
                    icon: "images/marker-"+elem.status+".png",
                });

                google.maps.event.addListener(marker, "mousedown", function() {
                    $scope.selectedRequest = elem;
                    $scope.$apply();
                });
            });

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秒前在地方放置一个标记，如果你移开手指或移动它，标记就不会被创建。

ng-map on-click无法在移动设备

2 个答案: