Flutter-使用google_maps_webservice和google_maps_flutter

时间:2019-09-25 23:36:07

标签: ios google-maps flutter dart google-places-api

这样做的目的是将用户使用股票google_maps_flutter插件可以在他们周围看到的地方变成可点击的标记。单击标记后,用户应该可以看到名称,开放时间,评论,图像等。

我只是想检索此类数据,并将其显示在google_maps_flutter地图上。我还想学习如何以英里为单位输入半径,因此,如果用户只想要一英里以内的地点,则可以根据需要选择该半径。

我要提供的解释是如何获取可变距离内的附近地点数据以及如何以动态方式将这些地点放置在地图上。

查看图。 1 作为背景,我希望点击“大笨钟”,我会得到名字,营业时间,评论,图片等。

这将使用placeId完成,获取图像的示例如下:https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=${photoReference}&key=${kGoogleApiKey}

example map

图1。

编辑:

玩完Sreerams的结论后,我得到的是返回的而不是附近的每个地方:

Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult'

这是我用来检索此数据的内容:

  static String kGoogleApiKey = 'myKey';
  GoogleMapsPlaces _places = GoogleMapsPlaces(apiKey: kGoogleApiKey);

  List<PlacesSearchResult> places = [];

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    getNearbyPlaces(LatLng(lat,lng));
  }

  void getNearbyPlaces(LatLng center) async {
    final location = Location(lat, lng);
    final result = await _places.searchNearbyWithRadius(location, 2500);

    setState(() {
      if (result.status == "OK") {
        this.places = result.results;

      }
      print(result.status);
    });
  }

这是我用来显示此数据的内容:

Text(places[i].toString())

我认为该解决方案将从this question的答案中重做一些代码。

谢谢

1 个答案:

答案 0 :(得分:1)

ListView

添加卡片,每一行显示地名,地址和类型。顶部的内嵌MapView显示位置的所有图钉标记。当用户点击该行时,该应用将导航到经过placeId的地方详细信息屏幕。

Future<Null> showDetailPlace(String placeId) async {
    if (placeId != null) {
        Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => PlaceDetailWidget(placeId)),
        );
    }
}

class PlaceDetailWidget extends StatefulWidget {
    String placeId;
    PlaceDetailWidget(String placeId) {
        this.placeId = placeId;
}

通过rajesh muthyala

查找对此的详细说明

enter image description here