Flutter地图服务插件huawei_map的使用
Flutter 地图服务插件 huawei_map 的使用
Huawei Map Flutter 插件
Huawei Map Kit 提供标准地图以及标记、形状和图层等UI元素，使您可以自定义更好的满足服务场景的地图。它允许用户在不同场景下通过手势和按钮与应用程序中的地图进行交互。
Huawei Map Kit 提供以下核心功能：
- 华为地图：具有大量功能的核心地图组件。
- 我的位置：在地图上显示您的位置。
- 标记：在地图上添加标记，并可以对它们的信息窗口进行大量修改。
- 折线：在地图上添加折线，并可以对它们进行大量修改。
- 多边形：在地图上添加多边形，并可以对它们进行大量修改。
- 圆：在地图上添加圆形，并可以对它们进行大量修改。
- 地面覆盖物：在地图上添加地面覆盖物，并可以对它们进行大量修改。
- 瓦片覆盖物：在地图上添加瓦片覆盖物，并可以对它们进行大量修改。
该插件使得 Huawei Map Kit SDK 和 Flutter 平台之间能够通信，暴露了所有由 Huawei Map Kit SDK 提供的功能。
安装
请参阅 pub.dev 和 AppGallery Connect 配置。
文档
问题或反馈
如果您在使用 HMS 示例时遇到任何问题，可以尝试以下选项：
- 在 Stack Overflow 上提问。请务必使用标签 huawei-mobile-services。
- 在 GitHub 上打开一个 Issue 或提交您的想法。
- 在 华为开发者论坛 中提出一般性问题或寻求建议。
- 查看 华为开发者文档，那里有所有 HMS Core Kits 的详细文档。
如果在示例中发现错误，请向 GitHub 仓库 提交 Issue。
许可证
Huawei Map Kit Flutter 插件 使用的是 Apache 2.0 许可证。
完整示例代码
/*
Copyright 2020-2024. Huawei Technologies Co., Ltd. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License")
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import 'package:flutter/material.dart';
import 'package:huawei_map/huawei_map.dart';
import 'package:huawei_map_example/components/circle_demo.dart';
import 'package:huawei_map_example/components/ground_overlay_demo.dart';
import 'package:huawei_map_example/components/marker_demo.dart';
import 'package:huawei_map_example/components/polygon_demo.dart';
import 'package:huawei_map_example/components/polyline_demo.dart';
import 'package:huawei_map_example/components/tile_overlay_demo.dart';
import 'package:huawei_map_example/components/heat_map_demo.dart';
import 'package:huawei_map_example/components/lite_mode_demo.dart';
import 'package:huawei_map_example/custom_widgets/custom_card.dart';
import 'package:huawei_map_example/huawei_map_demo.dart';
void main() {
runApp(
const MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Hms Map Flutter Plugin Demo',
home: HomePage(),
),
);
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
[@override](/user/override)
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
double top = 0.0;
double distance = 0.0;
LatLng? convertedLatLng;
bool hmsLoggerStatus = true;
[@override](/user/override)
void initState() {
HuaweiMapInitializer.initializeMap();
super.initState();
// TODO: 设置您的apiKey，位于agconnect-services文件中
HuaweiMapInitializer.setApiKey(apiKey: "");
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
floating: false,
expandedHeight: 220.0,
backgroundColor: Colors.transparent,
shadowColor: Colors.transparent,
flexibleSpace: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/banner2.png',
),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(50),
),
),
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
top = constraints.biggest.height;
return FlexibleSpaceBar(
centerTitle: true,
background: AnimatedOpacity(
opacity: top >= 220 ? 1.0 : 0.2,
duration: const Duration(milliseconds: 300),
child: const Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 25.0),
child: Text(
'华为地图套件提供标准地图以及标记、形状和图层等UI元素，使您可以自定义更好的满足服务场景的地图。',
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
),
),
),
title: const Text(
'华为地图 Flutter 示例',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
collapseMode: CollapseMode.pin,
);
},
),
),
),
SliverList(
delegate: SliverChildListDelegate(
<Widget>[
Column(
children: <Widget>[
const SizedBox(
height: 10,
),
CustomCard(
imagePath: 'assets/map.jpg',
text: '地图选项',
subText:
'地图监听器、交通、地图类型、相机动画等',
textColor: Colors.white,
onTap: () {
Navigator.push(
context,
MaterialPageRoute<dynamic>(
builder: (BuildContext context) =>
const HuaweiMapDemo(),
),
);
},
),
CustomCard(
imagePath: 'assets/marker.jpg',
text: '标记',
subText:
'监听器、动画、标记聚类、信息窗口等',
textColor: Colors.white,
onTap: () {
Navigator.push(
context,
MaterialPageRoute<dynamic>(
builder: (BuildContext context) =>
const MarkerDemo(),
),
);
},
),
CustomCard(
imagePath: 'assets/circle.jpg',
text: '圆形',
subText:
'监听器、颜色设置、描边设置等',
textColor: Colors.white,
onTap: () {
Navigator.push(
context,
MaterialPageRoute<dynamic>(
builder: (BuildContext context) =>
const CircleDemo(),
),
);
},
),
CustomCard(
imagePath: 'assets/polyline.jpg',
text: '折线',
subText: '监听器、模式、端点样式等',
textColor: Colors.white,
onTap: () {
Navigator.push(
context,
MaterialPageRoute<dynamic>(
builder: (BuildContext context) =>
const PolylineDemo(),
),
);
},
),
CustomCard(
imagePath: 'assets/polygon.jpg',
text: '多边形',
subText: '监听器、zIndex 等',
textColor: Colors.white,
onTap: () {
Navigator.push(
context,
MaterialPageRoute<dynamic>(
builder: (BuildContext context) =>
const PolygonDemo(),
),
);
},
),
CustomCard(
imagePath: 'assets/groundOverlay.jpg',
text: '地面覆盖物',
subText: '监听器、大小、透明度等',
textColor: Colors.white,
onTap: () {
Navigator.push(
context,
MaterialPageRoute<dynamic>(
builder: (BuildContext context) =>
const GroundOverlayDemo(),
),
);
},
),
CustomCard(
imagePath: 'assets/tileOverlay.jpg',
text: '瓦片覆盖物',
subText: '瓦片、URL 瓦片、瓦片缓存等',
textColor: Colors.white,
onTap: () {
Navigator.push(
context,
MaterialPageRoute<dynamic>(
builder: (BuildContext context) =>
const TileOverlayDemo(),
),
);
},
),
CustomCard(
imagePath: 'assets/heatMap.png',
text: '热力图',
subText:
'显示人群或车辆的密度和分布',
textColor: Colors.white,
onTap: () {
Navigator.push(
context,
MaterialPageRoute<dynamic>(
builder: (BuildContext context) =>
const HeatMapDemo(),
),
);
},
),
CustomCard(
text: '轻量模式',
imagePath: 'assets/liteMode.jpg',
textColor: Colors.white,
subText: '轻松创建静态地图图像',
onTap: () {
Navigator.push(
context,
MaterialPageRoute<dynamic>(
builder: (BuildContext context) =>
LiteModeDemo(),
),
);
},
),
const Padding(
padding:
EdgeInsets.symmetric(horizontal: 50, vertical: 20),
child: Divider(
color: Colors.black,
),
),
const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'距离计算器',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'计算两个坐标点之间的距离。',
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: MaterialButton(
onPressed: () async {
double? result =
await HuaweiMapUtils.distanceCalculator(
start: const LatLng(41.048641, 28.977033),
end: const LatLng(41.063984, 29.033135),
);
setState(() {
if (result != null) distance = result;
});
},
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(30.0)),
),
color: const Color.fromRGBO(18, 26, 55, 1),
textColor: Colors.white,
splashColor: Colors.redAccent,
padding: const EdgeInsets.all(12.0),
child: const Text('计算'),
),
),
distance == 0.0
? const SizedBox.shrink()
: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(distance.toString()),
),
const Padding(
padding:
EdgeInsets.symmetric(horizontal: 50, vertical: 20),
child: Divider(
color: Colors.black,
),
),
const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'坐标转换器',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
const Padding(
padding: EdgeInsets.symmetric(
horizontal: 24.0,
vertical: 8.0,
),
child: Text(
'它仅将中国境内的WGS84坐标转换为GCJ02坐标。',
textAlign: TextAlign.center,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: MaterialButton(
onPressed: () async {
LatLng result =
await HuaweiMapUtils.convertCoordinate(
const LatLng(39.902722, 116.391441),
);
setState(() {
convertedLatLng = result;
});
},
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(30.0),
),
),
color: const Color.fromRGBO(18, 26, 55, 1),
textColor: Colors.white,
splashColor: Colors.redAccent,
padding: const EdgeInsets.all(12.0),
child: const Text('转换'),
),
),
convertedLatLng == null
? const SizedBox.shrink()
: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'${convertedLatLng!.lat} : ${convertedLatLng!.lng}',
),
),
const Padding(
padding: EdgeInsets.symmetric(
horizontal: 50,
vertical: 20,
),
child: Divider(color: Colors.black),
),
const Padding(
padding: EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 18.0,
),
child: Text(
"此方法启用/禁用用于发送地图SDK方法的使用分析以改进服务质量的HMSLogger功能。",
textAlign: TextAlign.center,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: MaterialButton(
onPressed: () {
if (hmsLoggerStatus) {
HuaweiMapUtils.disableLogger();
hmsLoggerStatus = false;
} else {
HuaweiMapUtils.enableLogger();
hmsLoggerStatus = true;
}
},
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(30.0),
),
),
color: const Color.fromRGBO(18, 26, 55, 1),
textColor: Colors.white,
splashColor: Colors.redAccent,
padding: const EdgeInsets.all(12.0),
child: const Text(
'启用/禁用记录器',
),
),
),
const SizedBox(height: 30),
],
),
],
),
),
],
),
);
}
}
更多关于Flutter地图服务插件huawei_map的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter地图服务插件huawei_map的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何在Flutter项目中集成和使用huawei_map插件的示例代码。这个插件允许你在Flutter应用中嵌入华为的地图服务。
前提条件
- 确保你已经在华为开发者网站注册并创建了应用，获取了必要的API Key。
- 确保你的Flutter环境已经设置好，并且你的项目已经创建。
步骤一：添加依赖
首先，在你的pubspec.yaml文件中添加huawei_map依赖：
dependencies:
flutter:
sdk: flutter
huawei_map: ^最新版本号 # 请替换为最新的版本号
然后运行flutter pub get来安装依赖。
步骤二：配置AndroidManifest.xml
在android/app/src/main/AndroidManifest.xml文件中添加必要的权限和API Key：
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.yourapp">
<!-- 添加必要的权限 -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />
<application
... >
<!-- 添加API Key -->
<meta-data
android:name="com.huawei.hms.client.apikey"
android:value="你的API_KEY" />
<!-- 其他配置 -->
...
</application>
</manifest>
步骤三：配置build.gradle文件
在android/app/build.gradle文件中添加华为的Maven仓库：
allprojects {
repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' } // 添加华为Maven仓库
}
}
同时，确保你的项目级别的build.gradle文件应用了必要的插件：
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterSdkPath/packages/flutter_tools/gradle/flutter.gradle"
android {
...
defaultConfig {
...
applicationId "com.example.yourapp"
...
// 添加对华为服务的支持
manifestPlaceholders = [
'app_id' : "你的AppID",
'hms_api_key' : "你的API_KEY"
]
}
...
}
dependencies {
implementation "com.huawei.hms:maps:最新版本号" // 请替换为最新的版本号
...
}
步骤四：在Flutter中使用华为地图
创建一个新的Dart文件，比如map_page.dart，并在其中使用huawei_map插件：
import 'package:flutter/material.dart';
import 'package:huawei_map/huawei_map.dart';
class MapPage extends StatefulWidget {
@override
_MapPageState createState() => _MapPageState();
}
class _MapPageState extends State<MapPage> {
late HuaweiMapController _controller;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('华为地图示例'),
),
body: HuaweiMap(
onMapCreated: (controller) {
setState(() {
_controller = controller;
});
// 初始化地图，例如设置中心点
_controller.moveCamera(
CameraUpdate.newLatLngZoom(
LatLng(37.7749, -122.4194), // 旧金山的坐标
14.0,
),
);
},
initialCameraPosition: CameraPosition(
target: LatLng(0.0, 0.0),
zoom: 2.0,
),
options: MapOptions(
mapType: MapType.normal,
),
),
);
}
}
步骤五：运行你的应用
确保一切配置正确后，运行你的Flutter应用：
flutter run
如果一切顺利，你应该能够在你的应用中看到一个华为地图，并且它已经被初始化并显示在了屏幕上。
注意事项
- 确保你的设备或模拟器支持华为服务。
- 华为地图服务可能需要额外的配置，比如位置权限请求，这在Flutter中通常通过
permission_handler等插件来处理。 - 始终检查并遵循华为开发者文档中的最新指南和最佳实践。
