我正在https://medium.com/flutter-community/add-a-custom-info-window-to-your-google-map-pins-in-flutter-2e96fdca211a中试用本教程,为公交车应用程序的Map中的每个标记创建自定义信息窗口。但我无法使信息窗口正常工作。我找不到问题所在。我想使信息窗口更改为Map中放置的特定标记,并显示公交车到达时间。
这是我希望定制信息窗口在屏幕上显示的方式,带有公交车站的信息(公交车站名称和纬度和经度)
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class PinInformation {
LatLng location;
String locationName;
Color labelColor;
PinInformation({
required this.location,
required this.locationName,
required this.labelColor,
});
}
void main() => runApp(const NearbyBus());
class NearbyBus extends StatefulWidget {
const NearbyBus({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() {
return NearbyBusStopScreen();
}
}
class NearbyBusStopScreen extends State<NearbyBus> {
final Completer<GoogleMapController> _controller =
Completer<GoogleMapController>();
static const _initialCameraPosition =
CameraPosition(target: LatLng(1.3321, 103.7743), zoom: 19);
double pinPillPosition = -100;
PinInformation currentlySelectedPin = PinInformation(
location: const LatLng(0, 0),
locationName: '',
labelColor: Colors.grey,
);
late PinInformation busStopInfo; //hold values of the bus stop
String stopName = '';
@override
void initState() {
super.initState();
markerspin();
}
List<Marker> markerspin() {
final List<Marker> _markers = <Marker>[
Marker(
markerId: const MarkerId('Block 1'),
position: const LatLng(1.3333, 103.7769), //Block 1 coordinates
infoWindow: const InfoWindow(title: 'Block 1'),
onTap: () {
setState(() {
currentlySelectedPin = busStopInfo;
pinPillPosition = 0;
busStopInfo = PinInformation(
location: const LatLng(1.3333, 103.7769),
locationName: "Block 1",
labelColor: Colors.black);
});
}),
const Marker(
markerId: MarkerId('Block 51'),
position: LatLng(1.3321, 103.7744), //Block 51 coordinates
infoWindow: InfoWindow(
title: 'Block 51',
),
),
Marker(
markerId: const MarkerId('Block 35'),
position: const LatLng(1.33299, 103.77361), //Block 72 coordinates
infoWindow: InfoWindow(title: 'Block 35', onTap: () {}),
),
const Marker(
markerId: MarkerId('Block 22'),
position: LatLng(1.3342, 103.7755), //Block 22 coordinates
infoWindow: InfoWindow(
title: 'Block 22',
),
),
const Marker(
markerId: MarkerId('Convention Centre'),
position: LatLng(1.33235, 103.77563), //Convention Centre coordinates
infoWindow: InfoWindow(
title: 'Convention Centre',
),
),
const Marker(
markerId: MarkerId('Block 83'),
position: LatLng(1.330597, 103.774935), //Block 83 coordinates
infoWindow: InfoWindow(
title: 'Block 83',
),
),
];
return _markers;
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text("Nearby Bus Stops"),
backgroundColor: Colors.red,
),
body: Builder(builder: (context) {
return Stack(
children: <Widget>[
GoogleMap(
mapType: MapType.hybrid,
initialCameraPosition: _initialCameraPosition,
markers: Set<Marker>.of(markerspin()),
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
onTap: (LatLng location) {
setState(() {
pinPillPosition = 0;
});
},
),
AnimatedPositioned(
bottom: pinPillPosition,
right: 0,
left: 0,
duration: const Duration(milliseconds: 200),
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.all(30),
height: 50,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(
Radius.circular(50),
),
boxShadow: <BoxShadow>[
BoxShadow(
blurRadius: 20,
offset: Offset.zero,
color: Colors.grey.withOpacity(1))
]),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: const EdgeInsets.only(left: 10),
width: 50,
height: 50,
child: const Icon(
Icons.directions_bus_sharp,
color: Colors.grey,
),
),
Expanded(
child: Container(
margin: const EdgeInsets.only(left: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
currentlySelectedPin.locationName,
style: TextStyle(
color: currentlySelectedPin.labelColor),
),
Text(
currentlySelectedPin.location.latitude
.toString(),
),
],
),
)),
],
),
),
))
],
);
}));
}
}
1条答案
按热度按时间jv4diomz1#
你可以使用下面的代码来显示你的标记图标在总线
之后,你可以设置一个图像如下所示
如果需要帮助请告诉我。
先谢了