首页 > 其他 > 详细

67-Flutter中高德地图插件的使用

时间:2019-06-27 12:18:14      阅读:510      评论:0      收藏:0      [点我收藏+]

1、注册和建立高德API应用

高德网站:https://lbs.amap.com/

控制台-应用管理-创建应用

技术分享图片

在创建 Key

技术分享图片 技术分享图片

2、获得SHA1

进入Flutter项目中的android文件夹内,打开任意一个文件:

技术分享图片

比如进入 build.gradle,右上角会有 Open for Editing an Android Studio

点击一下,在新窗口打开该android项目:

技术分享图片

打开后如图所示:

技术分享图片

点击右侧 Gradle>android>app>Tasks>android>signingReport

技术分享图片

控制台尽管打印了很多信息,但是 SHA1 是相同的,这就是我们需要的值。

3、获得PackageName

技术分享图片

4、配置AndoridManifest.xml文件

在AndroidManifest.xml的application标签中配置Key:

https://lbs.amap.com/api/android-location-sdk/gettingstarted/

<meta-data
    android:name="com.amap.api.v2.apikey"
    android:value="你的key">

</meta-data>

5、编写代码

需要先进入根目录的pubspec.yaml文件,进行依赖注册。

amap_base: ^0.3.5
技术分享图片

main.dart 文件全部测试代码:

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

void main()async{
  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: ‘Flutter Demo‘,
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: ‘高德地图测试‘),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage{

  AMapController _controller;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body:AMapView(
              onAMapViewCreated: (controller) {
                _controller = controller;
              },
              amapOptions: AMapOptions(
                compassEnabled: false,
                zoomControlsEnabled: true,
                logoPosition: LOGO_POSITION_BOTTOM_CENTER,
                camera: CameraPosition(
                  target: LatLng(41.851827112.801637),
                  zoom: 4,
                ),
              ),

     );
  }

}

运行效果图:

技术分享图片

67-Flutter中高德地图插件的使用

原文:https://www.cnblogs.com/niceyoo/p/11095938.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!