首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Flutter谷歌地图中显示2 LatLng作为初始位置

在Flutter中显示两个LatLng作为初始位置可以通过使用谷歌地图插件来实现。下面是实现的步骤:

步骤1:添加依赖 在pubspec.yaml文件中添加google_maps_flutter插件的依赖:

代码语言:txt
复制
dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^1.2.0

步骤2:获取API密钥 访问Google Cloud Console(https://console.cloud.google.com/)并创建一个新项目。然后,启用Maps SDK for Android和Maps SDK for iOS API。获取生成的API密钥。

步骤3:在Android和iOS中配置API密钥 在Android中,在AndroidManifest.xml文件的application标签内添加以下代码:

代码语言:txt
复制
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY"/>

在iOS中,打开AppDelegate.swift文件,将以下代码添加到application(_:didFinishLaunchingWithOptions:)方法中:

代码语言:txt
复制
GMSServices.provideAPIKey("YOUR_API_KEY")

步骤4:在Flutter中显示地图 在Flutter的页面中引入google_maps_flutter包,并使用GoogleMap组件来显示地图。以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController mapController;

  final LatLng location1 = LatLng(37.4219999, -122.0840575);
  final LatLng location2 = LatLng(37.4279617, -122.085749);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map'),
      ),
      body: GoogleMap(
        initialCameraPosition: CameraPosition(
          target: location1,
          zoom: 14,
        ),
        onMapCreated: (GoogleMapController controller) {
          mapController = controller;
        },
        markers: {
          Marker(
            markerId: MarkerId('location1'),
            position: location1,
            infoWindow: InfoWindow(title: 'Location 1'),
          ),
          Marker(
            markerId: MarkerId('location2'),
            position: location2,
            infoWindow: InfoWindow(title: 'Location 2'),
          ),
        },
      ),
    );
  }
}

这个示例代码创建了一个名为MapScreen的Flutter页面,在页面上显示了一个包含两个标记位置的地图。在initialCameraPosition属性中设置了初始位置,markers属性用于添加标记。

注意替换YOUR_API_KEY为你在步骤2中获取的API密钥。

这样,你就可以在Flutter谷歌地图中显示两个LatLng作为初始位置了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

腾讯位置服务开发应用-使用教程,案例分享,知识总结

前言 作为一名在职岗位为【前端开发工程师】的程序员,我开发的应用程序经常需要获取用户位置信息,需要再某些场合下使用展示地图以及地图商的某些地点,需要获取行政区划列表(省市区)以及地址详情信息,需要在地图上规划一条...(注意这里我回去看开发教程,尽量把每个功能都熟悉说明一下使用方法) 一、腾讯位置服务是什么?...腾讯位置服务无疑是获取位置服务等信息内容,该产品亮点: 定位:为合作伙伴和广大开发者提供完善的位置解决方案,已为社交、出行、游戏、商业、O2O、物流等领域提供专业精准的定位服务 地图:腾讯位置服务在多平台为开发者提供了丰富的地图展现形式...//初始化地图二 var mapTwo = new TMap.Map("containerTwo", { center: new TMap.LatLng(39.984104...、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持,使得开发者可以自由实现自己的微信小程序产品。

6.3K51
  • 腾讯位置服务开发应用-使用教程,案例分享,知识总结

    前言 作为一名在职岗位为【前端开发工程师】的程序员,我开发的应用程序经常需要获取用户位置信息,需要再某些场合下使用展示地图以及地图商的某些地点,需要获取行政区划列表(省市区)以及地址详情信息,需要在地图上规划一条...(注意这里我回去看开发教程,尽量把每个功能都熟悉说明一下使用方法) 一、腾讯位置服务是什么?...,“100016”,没有则返回undefined cityCode,String,城市代码,“010”,没有则返回undefined uni.chooseLocation(OBJECT)打开地图选择位置...("center-info"); var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标 //初始化地图...、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持,使得开发者可以自由实现自己的微信小程序产品。

    3K40

    Android 天气APP(二十四)地图天气(上)自动定位和地图点击定位

    文章目录 前言 正文 一、修改应用配置 二、地图显示 三、定位到当前所在位置 四、点击地图定位 五、回到当前位置并清除标点 六、根据经纬度获取实际的定位信息 前言 之前也看过和风天气自己做的APP,主页面的地图点击之后...二、地图显示 首先打开你的Application,在onCreate中放入地图SDK初始化的代码 //在使用SDK各组件之前初始化context信息,传入ApplicationContext...因为这是默认的初始位置,所以需要自己去定位到当前位置。...builder = new MapStatus.Builder()//创建地图状态构造器 .target(latLng)//设置地图中心点,传入经纬度对象...然后再写一个初始化定位的方法。

    2K20

    使用腾讯位置服务实现类滴滴汽车沿轨迹行驶功能

    [image.png] 简易入门 首先进入腾讯位置服务页面然后进行注册账号,注册完成后需要申请AppKey,我们将在自己的应用中配置这个Key来使用SDK中的服务。...[企业微信20210521-111830@2x.png] webserveapi默认勾选就可以,在未上线之前,我们可以先不填域名白名单。...(39.984104, 116.307503); //初始化地图 var map = new TMap.Map("container", { rotation:...折线一般用于运动轨迹显示、路线规划显示 等场景中。 这个类是以图层的方式对折线进行单条或批量绘制,以及删改等操作。你可以在地图上创建,修改,删除。...(39.984104, 116.307503); //初始化地图 var map = new TMap.Map("container", { zoom: 15,

    90341

    七夕福利:程序员如何通过H5绘制手掌地图表白

    [七夕.gif] 一、使用个性化地图将小岛变成爱心 登录腾讯位置服务官网,注册帐号,在key管理里创建新密钥,QQ和微信都可以直接登录,而且个性化地图在网站和微信小程序中都可以使用哦。...同理,我们还可以更改陆的颜色或将“填充透明度”设为0%以增加与背景图手的融合。...[6fc40c16808049809efe3ec7e51aa4d2~tplv-k3u1fbpfcp-zoom-1.image] 先初始化地图(页面背景图为手的照片,中间层放的地图,顶层图是把手扣掉的png...//心形小岛坐标 var hart = new TMap.LatLng(24.932215,118.582971); //起始点坐标 var home = new TMap.LatLng...marker.moveAlong一般用来做轨迹回放,这里用来从家移动到心形小岛;map.easeTo可以使地图做平滑过渡的动画,这里一直放大地图到心形完整显示

    86520

    Android 高德地图API(详细步骤+源码)三

    ("长按了地图,经度:"+latLng.longitude+",纬度:"+latLng.latitude); } 可以看到我在点击和长按的监听中弹出Toast显示经纬度信息,这是通过LatLng...⑨ 改变地图中心点   我们在实际使用中通常会有这样的操作,希望点击一下就可以移动到所在,这其实是比较容易做到的,回顾我们现在是一进入地图就会定位到当前所在,而当我点击地图上其他位置时,会增加一个标点...,而我们要做的就是把这个标点作为图中心,然后移动地图位置即可。...那么思路已经有了,很简单下面来写代码,代码也是很简单的,首先新增一个updateMapCenter方法,里面传递一个LatLng对象作为入参。...方法如下: /** * 改变地图中位置 * @param latLng 位置 */ private void updateMapCenter(LatLng latLng

    3.7K31

    将华为地图套件集成到HarmonyOs可穿戴设备应用中

    使用此 SDK,您可以轻松将基于地图的功能集成到您的 HarmonyOs 应用程序中。 开发概述 需要安装 DevEcho 工作室 IDE,我假设您事先了解 HarmonyOs 和 Java。...步骤 2:在 AppGallery 中创建项目 步骤 3:在应用程序网格中配置应用程序 步骤 4:按照 SDK 集成步骤操作 让我们开始编码 MapAbilitySlice.java public class....liteMode(false) 设置首选项最小缩放级别 .minZoomPreference(3) 设置首选项最大缩放级别 .maxZoomPreference(13); 初始化地图视图对象。...latLng) { new ToastDialog(CommonContext.getContext()).setText("onMapClick ").show(); } }); 初始化圆形对象。...示例应用程序显示了如何在HarmonyOs可穿戴设备中实现地图套件。希望本文能帮助您理解和集成地图工具包,您可以在HarmonyoOs应用程序中使用此功能在可穿戴设备中显示地图。

    1K30

    Android 高德地图API(详细步骤+源码)四

    一进入RouteActivity之后就要定位到当前所在,这在前面我已经说过了,因此下面这一部分的代码我就不做讲解,如果你不理解是为什么,那么请从头看起。...mUiSettings.setZoomControlsEnabled(false); //显示比例尺 默认不显示 mUiSettings.setScaleControlsEnabled...起点其实已经有了,那就是我们当前所在,至于终点可以由用户来控制,比如我在当前所在位置,然后点击了地图上某一个地方,把这个地方作为终点,这样一想也是可行的。那么按照这个思路来写一下代码。...* @param visible true为显示节点图标,false为不显示。...下面新建一个initTravelMode方法用于初始化出行方式的数据,代码如下: /** * 初始化出行方式 */ private void initTravelMode(

    3.4K61

    使用 Android Studio 进行 Flutter 开发

    本文将与你一起回顾如何在 Android Studio 里进行 Flutter 工具的配置。 创建项目 你可以通过多种方式来创建新项目。 ?...对于未重载的小部件,将显示一个灰色圆圈,否则将显示一个灰色旋转圆圈。 “截图中的应用性能较差,通过重载分析器,你可以找到导致性能差的线索。重载分析器不是一个性能诊断工具,但它和性能有关。...你可以点击表格中的一行,定位到创建指定 widget 的源码位置。随着代码的运行,旋转图标也会在代码窗口中显示,以帮助你观察正在进行的重载。 大量的重载并不一定表示存在问题。...在项目视图中,右键点击 android 文件夹,然后选择 Open Module Settings。...如果这里没有列出 SDK,点击 New 并指定 Android SDK 的位置。确保选择和 Flutter 使用相匹配的 Android SDK( flutter doctor 中所示)。

    6.2K30

    用可视化地图讲照片的故事(Python+Leaflet)

    我们可以直观看近些年都去了哪里;可以制作和(男/女)朋友一起出去玩的地图故事;可以根据拍照时间和位置动态可视化游览路线;可以基于坐标的聚类整理照片,拍了800张照片,把每个城市的照片批量整理到各自文件夹...照片中的地理坐标记录在Exif块里,Exif信息以0xFFE1作为开头标记,采用TIFF格式,可以自己解析或直接用轮子exifread库,exifread是一个很方便使用的读取tiff和jpeg格式图片的...=exif[2]+' '+f latLons.append(exif) else: print(f,'exif is None') 有了照片和对应的位置...2,在地图中展示坐标 直接展示地理点坐标有很多工具,百度/高德地图的API、Echarts、Leaflet、OpenLayers及Mapbox等。...另外可以换底图,例如换成Satellite卫星底图,改map初始化时地图瓦片图层的调用url就行 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png

    1.9K20

    Flutter基础篇(8)-- Flutter for Web详细介绍

    Flutter for Web架构图 Flutter框架(上图中的绿色部分)在移动和网络产品之间共享。...Flutter为创建丰富的,以数据为中心的组件提供了一个强大的环境,可以轻松在现有网页中托管。...在现有移动应用程序内提供动态内容更新的既定方法是使用Web视图控件,其可以动态加载和显示信息。Flutter支持现在提供统一的Web和移动内容环境,使您可以在线部署内容或嵌入应用程序而无需重写。...---- 六、计划中的工作 1.支持文本功能,选择和复制粘贴。 2.支持插件。flutter_web目前还没有插件系统。...对于位置,相机和文件访问等功能,Flutter团队希望通过单一API桥接移动和网络。 3.对Progressive Web Apps等技术的开箱即用支持。

    2.9K10

    【进阶系列】地理位置专题

    ·     Timeout - 操作超时 2.3  在地图中显示结果         如需在地图中显示结果,您需要访问可使用经纬度的地图服务,比如谷歌地图或百度地图: 实例 function showPosition...document.getElementById("mapholder").innerHTML=""; } 亲自试一试         在上例中,我们使用返回的经纬度数据在谷歌图中显示位置...谷歌地图脚本         上面的链接向您演示如何使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。 2.4  给定位置的信息         本页演示的是如何在地图上显示用户的位置。...地图必须经过初始化才可以执行其他操作。 3.1.4    地图缩放与移动         地图被实例化并完成初始化以后,就可以对地图进行进行各种操作,缩放、拖拽。...下面示例显示用户拖动地图后地图中心的经纬度信息。

    78930

    用可视化地图讲照片的故事(Python+Leaflet)

    我们可以直观看近些年都去了哪里;可以制作和(男/女)朋友一起出去玩的地图故事;可以根据拍照时间和位置动态可视化游览路线;可以基于坐标的聚类整理照片,拍了800张照片,把每个城市的照片批量整理到各自文件夹...Exif块里,Exif信息以0xFFE1作为开头标记,采用TIFF格式,可以自己解析或直接用轮子exifread库,exifread是一个很方便使用的读取tiff和jpeg格式图片的Python库,在pypi...=exif[2]+' '+f latLons.append(exif) else: print(f,'exif is None') 有了照片和对应的位置...2,在地图中展示坐标 直接展示地理点坐标有很多工具,百度/高德地图的API、Echarts、Leaflet、OpenLayers及Mapbox等。...另外可以换底图,例如换成Satellite卫星底图,改map初始化时地图瓦片图层的调用url就行 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png

    2.3K30

    HTML5的Geolocation API

    Geolocation API存在于navigator对象中,只包含3个方法: 1、getCurrentPosition 2、watchPosition 3、clearWatch getCurrentPosition...两个属性 第三个参数都是geolocation选项,所有的geolocation选项都是可选的,它包含的属性如下: enableHighAccuracy(Boolean型,默认为false,是否尝试更精确读取纬度和经度...用来告诉浏览器是否使用最近缓存的位置数据,如果在maximumAge内有一个请求,将会返回它,而不请求新位置。...1、accuracy 准确角 2、altitude 海拔高度 3、altitudeAcuracy 海拔高度的精确度 4、heading 行进方向 5、speed 地面的速度 根据获得的纬度与经度,很容易将用户的位置在...google地图中显示出来,如下例所示: ?

    1.5K20
    领券