Google Maps API V3 Windows 操作系统触控支持规划和捏拉缩放

Question

我和我的同事惊讶地发现 GoogleMaps API V3 不支持 Windows 触摸，因此我们花了相当长的时间试图找出一种将鼠标事件转换为触摸事件的方法。例如，我们做了一些事情

$('#interceptor')[0].addEventListener('pinchin', _.bind(function(event){
        var scale = event.gesture.scale;
        this.map.setZoom(Math.max(1, Math.ceil(this.map.getZoom() * scale)));

      }, this));

将捏合事件转换为缩小功能。我们还使用了一个触摸 JavaScript 库 Hammer.js 来对触摸事件进行分类。有没有更好的方法来做到这一点？提前致谢！

Answer 1

我们最终实现了将触摸事件转换为鼠标事件/平移和缩放功能的方法

    initialize: function() {

      this.render();

      this.initMap();

      this.hammer = Hammer(this.$el.find('#interceptor')[0], {
        transform_always_block: true,
        transform_min_scale: 0,
        drag_block_horizontal: true,
        drag_block_vertical: true,
        drag_min_distance: 0,
        show_touches: true
      });

      if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {
        Hammer.plugins.fakeMultitouch();
        Hammer.plugins.showTouches();
      }

      this.initEvents(this.getMap());
    }, 

    initEvents: function(map) {

      $('#interceptor')[0].addEventListener('pinchin', _.bind(function(event){
        var scale = event.gesture.scale;
        this.map.setZoom(Math.max(1, Math.ceil(this.map.getZoom() * scale)));

      }, this));

      $('#interceptor')[0].addEventListener('pinchout', _.bind(function(event){
        var scale = event.gesture.scale;
        this.map.setZoom(Math.min(1, Math.floor(this.map.getZoom() / scale)));      
      }, this));

      function convertMouseEvents(newEventType, originalEventType){
        $('#interceptor')[0].addEventListener(originalEventType, function(event) {
          var touches = event.changedTouches,
            location = _.first(touches);

          var simulatedEvent = document.createEvent("MouseEvent");
          simulatedEvent.initMouseEvent(newEventType, true, true, window, 1,
            location.screenX, location.screenY,
            location.clientX, location.clientY, false,
            false, false, false, 0/*left*/, null);

          event.target.dispatchEvent(simulatedEvent);
          event.preventDefault();
        });
      }
      _.each({touchstart:'mousedown', touchend:'mouseup'}, _.bind(convertMouseEvents, this));
    },

    initMap: function() {
      var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        panControl: false,
        zoomControl: false,
        scaleControl: false
      };

      this.map = new google.maps.Map(this.$el.find('#map-canvas')[0], mapOptions);

      this.map.setTilt(45);
    },


    render: function() {

      var template =  _.template(MapTemplate);
      this.$el.html(template);

      return this;
    },