GWT Maps V3 中的搜索框 Api（branflake2267/GWT-Maps-V3-Api 版本 3.8.1）

Question

我正在使用 GWT Maps Api V3 开发应用程序。我尝试创建地方搜索框，例如 Google 地图 JavaScript API(link Place search box - Google Maps JavaScript API )

我查看了 javascript 代码，他们使用 google.maps.places.SearchBox 创建了 SeachBox 但是在 GWT Maps Api V3（版本 3.8.1，GWT-Maps-V3-Api ）中，有没有 class 名称搜索框。我想我可以使用 autocomplete 和 html 输入字段来创建搜索框。但是我不能将我的输入字段放在我的地图中。所以，我的问题是：使用 GWT Maps V3 Api 创建 SearchBox 的正确方法是什么？感谢您的帮助。

Answer 1

我已经通过使用方法（在 branflake2267/GWT-Maps-V3-Api 版本 3.8.1 上）解决了我的问题

void com.google.gwt.maps.client.MapWidget.setControls(ControlPosition controlPosition, Widget widget)

首先，我创建一个文本框

private TextBox placeSearchTextField = new TextBox();

并使用 setControls：

mapWidget.setControls(ControlPosition.TOP_LEFT, placeSearchTextField );

添加自动补全

private void drawAutoComplete() {

    Element element = placeSearchTextField.getElement();

    AutocompleteType[] types = new AutocompleteType[2];
    types[0] = AutocompleteType.ESTABLISHMENT;
    types[1] = AutocompleteType.GEOCODE;

    AutocompleteOptions options = AutocompleteOptions.newInstance();
    options.setTypes(types);

    final Autocomplete autoComplete = Autocomplete.newInstance(element, options);

    autoComplete.addPlaceChangeHandler(new PlaceChangeMapHandler() {
      public void onEvent(PlaceChangeMapEvent event) {        

        PlaceResult result = autoComplete.getPlace();

        PlaceGeometry geomtry = result.getGeometry();
        LatLng center = geomtry.getLocation();

        GWT.log("place changed center=" + center);
      }
    });

    mapWidget.getMap().addBoundsChangeHandler(new BoundsChangeMapHandler() {
        public void onEvent(BoundsChangeMapEvent event) {
          LatLngBounds bounds = mapWidget.getMap().getBounds();
          autoComplete.setBounds(bounds);
        }
      });
}

一些css，我得到了结果

GWT Maps V3 中的搜索框 Api（branflake2267/GWT-Maps-V3-Api 版本 3.8.1）

SearchBox in GWT Maps V3 Api (branflake2267/GWT-Maps-V3-Api version 3.8.1)

javascript

gwt

google-maps

google-maps-api-3