Flutter腾讯地图集成插件byn_tencent_map的使用

Flutter腾讯地图集成插件byn_tencent_map的使用

用于在iOS和Android应用程序中集成腾讯地图的Flutter插件。目前只集成了单次获取定位功能，地图选点功能。

开始使用

Android

1. 申请一个key 请访问腾讯地图开发指南申请一个key。

2. 在AndroidManifest.xml中配置key 在AndroidManifest.xml文件的<application>标签内添加以下代码（将value替换为申请到的key）：

   <meta-data
       android:name="TencentMapSDK"
       android:value="*****-*****-*****-*****-*****-*****"/>
   

iOS

1. 申请一个key 请访问腾讯地图开发指南申请一个key。

2. 在info.plist中增加权限描述 在Info.plist文件中增加以下代码：

   <key>NSLocationWhenInUseUsageDescription</key>
   <string>要用定位</string>
   

3. 在dart文件中设置key

   import 'package:byn_tencent_map/byn_tencent_map.dart';
   import 'package:flutter/material.dart';
   import 'dart:io';
   
   void main(){
     if (Platform.isIOS) {
       TencentMap.initIOSSdk("K7LBZ-6OXKZ-YHIXM-7K5IR-LU4T7-UDFH4");
     }
     runApp(const MyApp());
   }
   

如何使用

1. 导入dart包 修改pubspec.yaml文件，增加依赖：

   dependencies:
     byn_tencent_map: ^0.1.3
   

2. 在要用的地方导入

   import 'package:byn_tencent_map/byn_tencent_map.dart';
   

3. 单次获取定位

   MapPoiData? data = await TencentMap.getLocation();
   

4. 添加地图选点

   TencentMapView(
     onPick: (data) {
       print("TencentMap onPick poi: ${data.toJson()}");
     },
   )
   

完整示例代码

import 'dart:io';
import 'package:byn_tencent_map/byn_tencent_map.dart';
import 'package:flutter/material.dart';
import 'dart:async';

void main() {
  if (Platform.isIOS) {
    TencentMap.initIOSSdk("K7LBZ-6OXKZ-YHIXM-7K5IR-LU4T7-UDFH4");
  }
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  // 获取定位信息
  Future<void> fetchLocation() async {
    MapPoiData? location;
    try {
      location = await TencentMap.getLocation();
    } on PlatformException {
    }
    print("location ---- ${location?.toJson()}");
    if (!mounted) return;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          title: const Text('Plugin example app'),
          actions: [
            IconButton(
              onPressed: () {
                fetchLocation();
              },
              icon: const Icon(Icons.location_on_outlined),
            ),
          ],
        ),
        body: TencentMapView(
          onPick: (data) {
            print("demo onPick ---- ${data.toJson()}");
          },
        ),
      ),
    );
  }
}