dart google-maps - 觸發事件

我嘗試向我的自動填充框中添加一個監聽器，以便在按下Enter鍵時選擇第一個選項但它不起作用。dart google-maps - 觸發事件

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

     } 
    }); 
}

來源

2016-09-15 matth3o

貌似http://stackoverflow.com/questions/13595098/how-的DUP to-trigger-a-keyboardevent-in-dart –

我想使用谷歌地圖庫中的'event.trigger'，但也許可以通過'dispatch'方法完成。 – matth3o

我想主要的問題是創建一個'KeyboardEvent'與正確的鍵碼和其他屬性設置。 –

下面的代碼應該工作：

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

來源

2016-09-15 16:43:27

感謝您的回答。不幸的是，它仍然不起作用，建議的地址仍然存在，但第一選擇沒有重點，就像我按下向下鍵時應該有的那樣。 – matth3o

你可以貼一些自動提示框的代碼嗎？ –

我編輯了我的問題，謝謝你的時間。 – matth3o

dart google-maps - 觸發事件

回答

相關問題