Flutter接入高德地图(记录)

Flutter版本高德地图功能目前十分简陋,不建议制作复杂功能。

注意:地图的坐标经纬度回显默认是度为单位,一般GPS获取的可以直接回显位置不需要进行转换

需要安装的依赖

amap_flutter_map: ^3.0.0     
amap_flutter_base: ^3.0.0     

1、页面代码

import 'dart:math';

import 'package:amap_flutter_base/amap_flutter_base.dart';
import 'package:amap_flutter_map/amap_flutter_map.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_project/src/pages/amapPage/state.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../widgets/provider/changeNotifierProvider_widget.dart';

class AmapPage extends StatefulWidget {
  const AmapPage({super.key});

  @override
  State<AmapPage> createState() => _AmapPageState();
}

class _AmapPageState extends State<AmapPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("地图定位")
      ),
      // ChangeNotifierProviderWidget封装的provider状态管理器
      body: ChangeNotifierProviderWidget<AMapState>(
        model: AMapState(),
        builder: (_, model, widget) {
          // 每次build都需要重新生成地图
          model.aMapWidget();

          return Container(
              child: model.map,
            )
          ),
        ],
      );
    })
    );
  }
}

2、页面对应的状态代码 

late AMapController aMapController; 

   // 获取审图号
  void getApprovalNumber(AMapController mapController) async {
    // 用于后面对地图中心点,角度等信息进行编辑
    aMapController = mapController;

    //普通地图审图号
    String? mapContentApprovalNumber = await mapController?.getMapContentApprovalNumber();
    //卫星地图审图号
    String? satelliteImageApprovalNumber = await mapController?.getSatelliteImageApprovalNumber();

    print('地图审图号(普通地图): $mapContentApprovalNumber');
    print('地图审图号(卫星地图): $satelliteImageApprovalNumber');
  }

late AMapWidget map;

void aMapWidget() {
    map = AMapWidget(
      privacyStatement: const AMapPrivacyStatement(hasContains: true, hasShow: true, hasAgree: true),
      apiKey: AMapApiKey(
        androidKey: "" // 填入高德地图的key值,在高德地图管理平台获取
      ),
      compassEnabled: true, // 显示指南针
      markers: Set<Marker>.of(_markers.values), // marker定点
      onMapCreated: getApprovalNumber,
    );
  }

3、修改地图中心点

LatLng? markerPosition; // 标记点坐标

// 设置地图中心点位置
  void moveCamera() {
    if(markerPosition == null) return;

    aMapController.moveCamera(
      CameraUpdate.newCameraPosition(
        CameraPosition(
          //中心点
            target: markerPosition!,
            //缩放级别
            zoom: 15,
            //俯仰角0°~45°(垂直与地图时为0)
            tilt: 30,
            //偏航角 0~360° (正北方为0)
            bearing: 0),
      ),
      animated: true,
    );
  }

4、定义标记点

注:官方示例Marker标记点的气泡信息窗口只能通过点击方式进行显示,不能设置成一直显示状态

Map<String, Marker> _markers = <String, Marker>{}; // 标记点集合
Marker? marker;

// 定点
  void setMarker() {
    marker ??= Marker(
        position: markerPosition!,
        icon: BitmapDescriptor.fromIconPath('assets/images/location_marker.png'),
      );

    // 修改标记中心点 - 使用copyWith方法进行修改某项参数
    marker = marker!.copyWith(positionParam: markerPosition);

    // 一个标记点对应一个id,通过id修改指定点参数;注:每次使用Marker()会生成一个新的id
    _markers[marker!.id] = marker!;
    notifyListeners();
  }

祝发大财!!!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值