谷歌地图触发事件

Question

我尝试在我的自动完成框中添加一个侦听器，以便在按回车键时选择第一个选择，但它不起作用。

event.addDomListener(input, 'keypress', (e) {
  if (e.keyCode == 13) {
    event.trigger(html.document.getElementById('pac-input').innerHtml, 'keydown',
        html.KeyCode.DOWN);
  }
});

我不确定关于

html.document.getElementById('pac-input').innerHtml

谢谢你的帮助。

[编辑]

我用的是angular2.0.0-beta.21.

我的模板是:

<input id="pac-input" class="controls" type="text"
   placeholder="Enter a location">
<div id="map-canvas" style="height: 500px;"></div>

和我的组件:

 @Component(
     selector: 'myComponent',
     templateUrl: 'template.html',
     pipes: const [IntlPipe]
 )
 class MyComponent implements OnInit {
   final UserService _userService;
   final IntlService _intlService;
   Autocomplete autocomplete;
   GMap map;
   String infoMessage = "";
   String errorMessage = "";
   CornersComponent(this._userService, this._intlService);
   @override
   ngOnInit() {
     var mapOptions = new MapOptions()
       ..zoom = 13
       ..maxZoom = 19
       ..minZoom = 12
       ..center = new LatLng(48.871083, 2.346348)
       ..mapTypeId = MapTypeId.ROADMAP
       ..streetViewControl = false
       ..panControl = false
       ..mapTypeControl = false
       ..scrollwheel = false
       ..styles = <MapTypeStyle>[
         new MapTypeStyle()
           ..featureType = MapTypeStyleFeatureType.POI_BUSINESS
           ..elementType = MapTypeStyleElementType.LABELS
           ..stylers = <MapTypeStyler>[
             new MapTypeStyler()
               ..visibility = 'off'
           ]
       ];
     map = new GMap(html.querySelector("#map-canvas"), mapOptions);
     var input = html.document.getElementById('pac-input') as html
         .InputElement;
     map.controls[ControlPosition.TOP_LEFT].push(input);
     autocomplete = new Autocomplete(input);
     autocomplete.bindTo('bounds', map);
     final infowindow = new InfoWindow();
     final marker = new Marker(new MarkerOptions()
       ..map = map
       ..anchorPoint = new Point(0, -29));

     autocomplete.onPlaceChanged.listen((_) {
       infowindow.close();
       marker.visible = false;
       final place = autocomplete.place;
       if (place.geometry == null) {
         return;
       }
       // If the place has a geometry, then present it on a map.
       if (place.geometry.viewport != null) {
         map.fitBounds(place.geometry.viewport);
       } else {
         map.center = place.geometry.location;
         map.zoom = 15; // Why 17? Because it looks good.
       }
       marker.icon = new Icon()
         ..url = place.icon
         ..size = new Size(71, 71)
         ..origin = new Point(0, 0)
         ..anchor = new Point(17, 34)
         ..scaledSize = new Size(35, 35);
       marker.position = place.geometry.location;
       marker.visible = true;
       String address = '';
       if (place.addressComponents != null) {
         address = [
           (place.addressComponents[0] != null &&
               place.addressComponents[0].shortName != null
               ? place.addressComponents[0].shortName
               : ''),
           (place.addressComponents[1] != null &&
               place.addressComponents[1].shortName != null
               ? place.addressComponents[1].shortName
               : ''),
           (place.addressComponents[2] != null &&
               place.addressComponents[2].shortName != null
               ? place.addressComponents[2].shortName
               : '')
         ].join(' ');
       }
       infowindow.content = '<div><strong>${place.name}</strong><br>${address}';
       infowindow.open(map, marker);
     });     
    event.addDomListener(input, 'keypress', (e) {
        assert(e is html.KeyboardEvent);
        if (e.keyCode == html.KeyCode.ENTER) {
             event.trigger(input, 'keydown',
             new html.KeyEvent('keydown', keyCode: html.KeyCode.DOWN));
  }
});
   }
 }

我已经找到了一个解决方案:

在ngOnInit方法的末端调用: context.callMethod('myJavascriptMethod');

function myJavascriptMethod() {
    var input = document.getElementById('pac-input');
    google.maps.event.addDomListener(input, 'keypress', function (e) {
        if (e.keyCode === 13) {
            google.maps.event.trigger(this, 'keydown', {"keyCode": 40});
        }
    });
}

Answer 1

下面的代码应该可以工作:

import 'dart:js_util' show jsify;
event.addDomListener(input, 'keypress', (e) {
  assert(e is html.KeyboardEvent);
  if (e.keyCode == html.KeyCode.ENTER) {
      event.trigger(input, 'keydown', jsify({'keyCode': html.KeyCode.DOWN}));
  }
});

您可以选择使用以下命令来触发事件:

input.dispatchEvent(new html.KeyEvent('keydown', keyCode: html.KeyCode.DOWN));