開始値と終了点のlat値とlong値を持つデータがあります。
このようなマーカーを表示しようとしています
class _TripRouteScreenState extends State<TripRouteScreen> {
BitmapDescriptor pinLocationIcon;
var start_currentPostion;
var end_currentPostion;
Map<MarkerId, Marker> markers =
<MarkerId, Marker>{}; // CLASS MEMBER, MAP OF MARKS
void setCustomMapPin() async {
pinLocationIcon = await BitmapDescriptor.fromAssetImage(
ImageConfiguration(devicePixelRatio: 2.5), 'images/pin.png');
}
@override
void initState() {
super.initState();
setCustomMapPin();
working();
}
working(){
print(widget.data);
double start_latitude = widget.data['start']['lat'].toDouble();
double start_longitude = widget.data['start']['lon'].toDouble();
double end_latitude = widget.data['end']['lat'].toDouble();
double end_longitude = widget.data['end']['lon'].toDouble();
start_currentPostion = LatLng(start_latitude, start_longitude); //this is the marker 1 location which is already set and showing in map
end_currentPostion = LatLng(end_latitude, end_longitude); // this is the marker 2 location which needs to be set and show marker on this value
print(start_currentPostion);
print(end_currentPostion);
var snip = widget.data["start"]["address"];
final Map<String, Marker> _markers = {};
setState(() {
final MarkerId markerId = MarkerId('1');
// creating a new MARKER
final Marker marker = Marker(
markerId: markerId,
icon: pinLocationIcon,
position: start_currentPostion,
infoWindow: InfoWindow(title: 'Address',snippet: snip),
);
setState(() {
// adding a new marker to map
markers[markerId] = marker;
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back)),
centerTitle: true,
flexibleSpace: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/nav.jpg'),
fit: BoxFit.cover,
),
),
),
backgroundColor: Colors.transparent,
title: Text(
'Route Location',
style: TextStyle(fontFamily: 'UbuntuBold'),
),
actions: [
Padding(
padding: const EdgeInsets.only(right: 15),
child: Icon(
Icons.notifications_none,
size: 33,
),
)
]),
body: GoogleMap(
mapType: MapType.normal,
initialCameraPosition: CameraPosition(
target: start_currentPostion,
zoom: 15,
),
markers: Set<Marker>.of(markers.values), // YOUR MARKS IN MAP
),
);
}
}
問題は、マップにマーカーを追加できることですが、開始点のみです:D平均start_currentPostion終了点にもマーカーを追加する必要があります。これはend_currentPostionですが、どうすればよいかわかりません。チュートリアルやその他の回答から、最終的に1つのマーカーを追加できますが、2つ目のマーカーを追加する方法がわかりません。
だから私はあなたのコードを試してみました、そして私はあなたのコードにいくつかの変更を加えました今これは実行されています。そこでまず、マーカーデータlist
を保存するための空を作成しました。その後、2つのマーカーIDを作成し、そのIDをに追加し、マーカーIDを使用して別の場所で作成し、このマーカーをに追加して、この値にGoogleマップにアクセスします。グーグルマップでルートを描くために、あなたは中程度の記事とこのGithubの投稿をチェックすることができますlist
2 markers
setmarkers
class _TripRouteScreenState extends State<HomeScreen> {
BitmapDescriptor pinLocationIcon;
var start_currentPostion;
var end_currentPostion;
Map<MarkerId, Marker> setmarkers = {};
List listMarkerIds = List(); // For store data of your markers
@override
void initState() {
super.initState();
working();
}
working() {
// You just need to pass dynamically your data
double start_latitude = 19.965651;
double start_longitude = 73.771683;
double end_latitude = 19.997454;
double end_longitude = 73.789803;
start_currentPostion = LatLng(start_latitude, start_longitude);
end_currentPostion = LatLng(end_latitude, end_longitude);
setState(() {
MarkerId markerId1 = MarkerId("1");
MarkerId markerId2 = MarkerId("2");
listMarkerIds.add(markerId1);
listMarkerIds.add(markerId2);
Marker marker1 = Marker(
markerId: markerId1,
position: LatLng(start_latitude, start_longitude),
icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
);
Marker marker2 = Marker(
markerId: markerId2,
position: LatLng(end_latitude, end_longitude),
icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed), // you can change the color of marker
);
setmarkers[markerId1] = marker1; // I Just added here markers on the basis of marker id
setmarkers[markerId2] = marker2;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(Icons.arrow_back)),
centerTitle: true,
flexibleSpace: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/nav.jpg'),
fit: BoxFit.cover,
),
),
),
backgroundColor: Colors.transparent,
title: Text(
'Route Location',
style: TextStyle(fontFamily: 'UbuntuBold'),
),
actions: [
Padding(
padding: const EdgeInsets.only(right: 15),
child: Icon(
Icons.notifications_none,
size: 33,
),
)
]),
body: GoogleMap(
mapType: MapType.normal,
initialCameraPosition: CameraPosition(
target: start_currentPostion,
zoom: 15,
),
markers: Set.of(setmarkers.values), // YOUR MARKS IN MAP
),
);
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加