dart google-maps - 触发事件

Question

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

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