flutter 高德地图选择位置信息返回

添加依赖:(注意,作者一直更新维护,请以最新的版本添加)

  amap_map_fluttify: ^0.10.2
  amap_search_fluttify: ^0.3.4

代码实现:

import ‘package:amap_map_fluttify/amap_map_fluttify.dart‘;

import ‘package:flutter/material.dart‘;
import ‘package:amap_search_fluttify/amap_search_fluttify.dart‘;
import ‘package:demo/resources/custom_text_style.dart‘;
import ‘package:demo/utils/misc.dart‘;

import ‘package:demo/widgets/network_state/page_loading.dart‘;

class SelectLocationFromMapPage extends StatefulWidget {
  @override
  _SelectLocationFromMapPageState createState() =>
      _SelectLocationFromMapPageState();
}

class _SelectLocationFromMapPageState extends State<SelectLocationFromMapPage> {
  AmapController _controller;
  List<Poi> poiList;
  static List<PoiModel> list = new List();
  static List<PoiModel> searchlist = new List();
  PoiModel poiModel;
  String keyword = "";
  String address = "";
  bool isloading = true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false, //防止底部布局被顶起
      appBar: AppBar(
        title: Text(
          ‘选择位置信息‘,
          style: CustomTextStyle.appBarTitleTextStyle,
        ),
        elevation: 0.0,
        centerTitle: true,
      ),

      body: Column(
        children: <Widget>[
          Theme(
            data: new ThemeData(
                primaryColor: Color(0xFFFFCA28), hintColor: Color(0xFFFFCA28)),
            child: Container(
              color: Color(0xFFFFCA28),
              padding: EdgeInsets.all(5),
              child: Container(
                height: 36,
                margin: EdgeInsets.only(left: 5, right: 5, bottom: 5),
                child: TextField(
                  style: TextStyle(fontSize: 16, letterSpacing: 1.0),
                  controller: TextEditingController.fromValue(TextEditingValue(
                    // 设置内容
                    text: keyword,
                    selection: TextSelection.fromPosition(TextPosition(
                        affinity: TextAffinity.downstream,
                        offset: keyword?.length ?? 0)),
                    // 保持光标在最后
                  )),
                  decoration: InputDecoration(
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(40)),
                    ),
                    hintText: ‘输入关键字‘,
                    hintStyle:
                        TextStyle(color: Color(0xFFBEBEBE), fontSize: 14),
                    contentPadding:
                        const EdgeInsets.symmetric(vertical: 8, horizontal: 1),
                    prefixIcon: Icon(
                      Icons.search,
                      color: Colors.grey,
                      size: 20,
                    ),
                    suffixIcon: IconButton(
                      icon: Icon(
                        Icons.clear,
                        color: Colors.grey,
                        size: 20,
                      ),
                      onPressed: () {
                        keyword = "";
                        setState(() {});
                      },
                    ),
                    fillColor: Colors.white,
                    filled: true,
                  ),

                  inputFormatters: [],
                  //内容改变的回调
                  onChanged: (text) {
                    print(‘change $text‘);
                    keyword = text;
                  },
                  //内容提交(按回车)的回调
                  onSubmitted: (text) {
                    print(‘submit $text‘);
                    // 触发关闭弹出来的键盘。
                    keyword = text;
                    setState(() {
                      isloading = true;
                      FocusScope.of(context).requestFocus(FocusNode());
                    });

                    searchAroundAddress(text.toString());
                  },
                  //按回车时调用
                  onEditingComplete: () {
                    print(‘onEditingComplete‘);
                  },
                ),
              ),
            ),
          ),
          Container(
            height: 300,
            child: Stack(
              children: <Widget>[
                AmapView(
                  showZoomControl: false,
                  centerCoordinate: LatLng(39, 110),
                  maskDelay: Duration(milliseconds: 500),
                  zoomLevel: 16,
                  onMapCreated: (controller) async {
                    _controller = controller;
                    if (await requestPermission()) {
                      await controller.showMyLocation(true);
                      await controller?.showLocateControl(true);
                      final latLng = await _controller?.getLocation(
                          delay: Duration(seconds: 2));
                      await enableFluttifyLog(false); // 关闭log
                      _loadData(latLng);
                    }
                  },
                  onMapMoveEnd: (MapMove move) async {
                    _loadData(move.latLng);
                  },
                ),
                Center(
                  child: Icon(
                    Icons.place,
                    size: 36.0,
                    color: Color(0xFFFF0000),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            flex: 1,
            child: Visibility(
              visible: !isloading,
              maintainSize: false,
              maintainSemantics: false,
              maintainInteractivity: false,
              replacement: PageLoading(),
              child: ListView.builder(
                  itemCount: list.length,
                  itemBuilder: (BuildContext context, int position) {
                    print("itemBuilder" + list.length.toString());
                    PoiModel item = list[position];
                    return InkWell(
                      child: Column(
                        children: <Widget>[
                          Container(
                            margin:
                                EdgeInsets.only(top: 8, bottom: 5, left: 10),
                            child: Row(
                              children: <Widget>[
                                Icon(
                                  Icons.place,
                                  size: 20.0,
                                  color: position == 0
                                      ? Colors.green
                                      : Colors.grey,
                                ),
                                Text(item.title,
                                    style: TextStyle(
                                        fontSize: 16,
                                        color: position == 0
                                            ? Colors.green
                                            : Color(0xFF787878)))
                              ],
                            ),
                          ),
                          Container(
                            margin:
                                EdgeInsets.only(top: 5, bottom: 5, left: 18),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              item.address,
                              style: TextStyle(
                                fontSize: 14,
                                color: Color(0xFF646464),
                              ),
                            ),
                          ),
                          Divider(
                            height: 1,
                          )
                        ],
                      ),
                      onTap: () async {
                        await _controller.setCenterCoordinate(
                            item.latLng.latitude, item.latLng.longitude,
                            zoomLevel: 16);
                        Navigator.pop(context, {
                          ‘address‘: item.address,
                        });
                      },
                    );
                  }),
            ),
          ),
        ],
      ),
    );
  }

  void _loadData(LatLng latLng) async {
    setState(() {
      isloading = true;
    });

    /// 逆地理编码(坐标转地址)
    ReGeocode reGeocodeList = await AmapSearch.searchReGeocode(
      latLng,
    );

    print(await reGeocodeList.toFutureString());
    address = await reGeocodeList.formatAddress;

    final poiList = await AmapSearch.searchKeyword(
      address.toString(),
      city: "西安",
    );

    poiModel = new PoiModel("当前位置", address, latLng);
    list.clear();
    list.add(poiModel);
    for (var poi in poiList) {
      String title = await poi.title;
      String cityName = await poi.cityName;
      String provinceName = await poi.provinceName;
      String address = await poi.address;
      LatLng latLng = await poi.latLng;

      list.add(new PoiModel(
          title.toString(),
          provinceName.toString() + cityName.toString() + address.toString(),
          latLng));
    }

    setState(() {
      isloading = false;
    });
  }

  void searchAroundAddress(String text) async {
    final poiList = await AmapSearch.searchKeyword(
      text,
      city: "西安",
    );

    list.clear();
    list.add(poiModel);
    for (var poi in poiList) {
      String title = await poi.title;
      LatLng latLng = await poi.latLng;
      String cityName = await poi.cityName;
      String provinceName = await poi.provinceName;
      String address = await poi.address;
      list.add(new PoiModel(
          title.toString(),
          provinceName.toString() + cityName.toString() + address.toString(),
          latLng));
    }
    setState(() {
      isloading = false;
      FocusScope.of(context).requestFocus(FocusNode());
    });
  }
}

class PoiModel {
  LatLng latLng;
  String title;
  String address;

  PoiModel(this.title, this.address, this.latLng);
}

misc.dart

import ‘package:permission_handler/permission_handler.dart‘;

Future<bool> requestPermission() async {
  final permissions =
      await PermissionHandler().requestPermissions([PermissionGroup.location]);

  if (permissions[PermissionGroup.location] == PermissionStatus.granted) {
    return true;
  } else {
    ToastUtils.toastLong("需要定位权限!");
    return false;
  }
}

pageloading.dart

import ‘package:flutter/cupertino.dart‘;
import ‘package:flutter/material.dart‘;

class PageLoading extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          CupertinoActivityIndicator(),
//          Text(‘  正在加载‘, style: TextStyle(fontSize: 16.0),),
        ],
      ),
    );
  }
}

效果:

原文地址:https://www.cnblogs.com/loaderman/p/11993837.html

时间: 2024-11-13 10:42:53

flutter 高德地图选择位置信息返回的相关文章

高德地图返回地址详细信息

个人习惯,上图 关于高德地图自动定位返回地址详细信息一直没写,一方面太忙了(也可以说太懒了),另一方面这个地方的内容太少,因为项目后面会用到快速搜索提示,往地图中添加marker.以及导航以及语音提示等等 本来想等项目上线在好好总结一下,算了不想拖了, 上代码: package com.example.mydemo; import android.app.Activity;import android.location.Location;import android.os.Bundle;impo

微信小程序调用地图选取位置后返回信息

先看一下wxml的代码,绑定个事件! <view class='carpool_data_all'> <view class='aa'> <text>*出发地</text> </view> <view class='bb' bindtap='selectlocation'> <input disabled placeholder='请选择出发地' value="{{departure}}"></i

php跨域接受--以高德地图为例

高德地图php安地理位置查询坐标: $ch = curl_init (); // 设置URL和相应的选项 curl_setopt ( $ch ,CURLOPT_URL ,"http://restapi.amap.com/v3/geocode/geo?address=".$address."&output=json&key=高德地图key");//注意output返回数据类型只有json和xml两种 curl_setopt($ch, CURLOPT_R

高德地图搜索提示获取信息回传activity刷新ui(二)

应用场景: 在主activity中点击进入到另一个activity搜索提示,获取经纬度,点确定返回到主activity,虽然说需求很奇葩,但是遇到了没办法.. 主要包含两部分,搜索提示+activity回退携带信息刷新主acitivity. 1>搜索提示 代码中贴到 2>activity进入到另一个activity,在另一个activity进行操作获取数据之后,回到到activity刷新页面: 主activity里面点击: Intent intent = new Intent(MainActi

H5高德地图获取当前位置

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, wi

利用高德地图完成用户地图选址,包括搜索位置和标签固定居中

这两天一直捣鼓着地图的选址功能,需要达到的要求是:1,能用户定位  2,大头针固定在地图中心,拖动地图停止后获取到该大头针的位置信息    3,能通过搜索框搜索到我们输入的地址 主要思路:大头针分为两个   一个是用户的位置大头针  另一个是所选取的位置的大头针(包括拖动后的大头针和搜索功能查找到位置的大头针,公用一个大头针  )并且两个大头针都成为控制器器属性. 我使用到的高德地图sdk是: 'AMap3DMap' , '5.2.1' #高德3D地图 'AMapSearch' , '5.2.1

【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具),最重要最不可缺少的就是覆盖物了.覆盖物有多种,包括,标注.折线.多边形.信息窗口.聚合marker.麻点图和图片覆盖物.本文会详细介绍每一种覆盖物的概念,添加方法,修改方法,移除方法等.最后会提供示例和源代码下载. 示例demo:http://zhaoziang.com/amap/zero_3_1.html ----------------------------

高德地图-展示多个信息窗口

1.问题背景 高德地图,设置小图标,并点击图标显示信息 2.实现源码 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="init

JS爬取高德地图地址信息(周边设施经纬度)

需求:给定进百万小区名称及对应城市信息,通过高德获取其周边设施信息(交通.医疗.教育.生活设施) 高德JS API 爬取灵感来自高德开发支持的JS API,当然你也可以直接调用高德提供的api服务获取地址信息,但是api服务是有次数限制.而JS API的调用并没有次数限制,经我的验证一个爬取节点控制在500毫秒的抓取频率是没有限制的. https://lbs.amap.com/api/javascript-api/example/poi-search/keywords-search 高德地址信息