Reputation: 1950
I have a map with two markers, which I have managed to center between. I'm not certain if this way is the correct, or most efficient way of centering the two markers, but it seems to be working just fine.
My problem is that I also have 'myLocationEnabled' to true (the blue dot on maps which represents you, the user). I need to focus the camera of Google Maps on the center between these markers AND the location of the user. So now, there are three points I need to center between.
If the best option is to create a self-made marker to represent the user's location, how can I center the camera between three markers?
LatLng _center;
String _mapStyle;
GoogleMapController googleMapController;
Set<Marker> markers = HashSet<Marker>();
BitmapDescriptor pinMerchantIcon;
BitmapDescriptor pinCustomerIcon;
void _onOrderPinged(GoogleMapController mapController) {
googleMapController = mapController;
setState(() {
markers.add(
Marker(
draggable: false,
markerId: MarkerId("Customer"),
icon: pinCustomerIcon,
position: LatLng(pingedList[0].userLat, pingedList[0].userLong),
),
);
});
setState(() {
markers.add(
Marker(
infoWindow: InfoWindow(
title: "Merchant",
),
draggable: false,
markerId: MarkerId("Pick Up"),
icon: pinMerchantIcon,
// position: _center,
position:
LatLng(pingedList[0].merchantLat, pingedList[0].merchantLong)),
);
});
mapController.setMapStyle(_mapStyle);
var merchantLatLongClosest =
Provider.of<DistanceProvider>(context, listen: false).distanceClosest(
widget.latitude,
widget.longitude,
pingedList[0].merchantLat,
pingedList[0].merchantLong);
var userLatLongClosest =
Provider.of<DistanceProvider>(context, listen: false).distanceClosest(
widget.latitude,
widget.longitude,
pingedList[0].userLat,
pingedList[0].userLong);
var distanceBetweenUserMerchant =
Provider.of<DistanceProvider>(context, listen: false).distanceClosest(
pingedList[0].merchantLat,
pingedList[0].merchantLong,
pingedList[0].userLat,
pingedList[0].userLong,
);
final currentLatLng = userLatLongClosest < merchantLatLongClosest
? LatLng(pingedList[0].merchantLat, pingedList[0].merchantLong)
: LatLng(pingedList[0].userLat, pingedList[0].userLong);
final LatLng offerLatLng = LatLng(widget.latitude, widget.longitude);
LatLngBounds bound;
if(distanceBetweenUserMerchant > userLatLongClosest && distanceBetweenUserMerchant > merchantLatLongClosest){
if (userLatLongClosest < merchantLatLongClosest) {
if (offerLatLng.latitude > pingedList[0].merchantLat &&
offerLatLng.longitude > pingedList[0].merchantLong) {
bound = LatLngBounds(southwest: currentLatLng, northeast: offerLatLng);
} else if (offerLatLng.longitude > currentLatLng.longitude) {
bound = LatLngBounds(
southwest: LatLng(offerLatLng.latitude, currentLatLng.longitude),
northeast: LatLng(currentLatLng.latitude, offerLatLng.longitude));
} else if (offerLatLng.latitude > currentLatLng.latitude) {
bound = LatLngBounds(
southwest: LatLng(currentLatLng.latitude, offerLatLng.longitude),
northeast: LatLng(offerLatLng.latitude, currentLatLng.longitude));
} else {
bound = LatLngBounds(southwest: offerLatLng, northeast: currentLatLng);
}
} else {
if (offerLatLng.latitude > pingedList[0].userLat &&
offerLatLng.longitude > pingedList[0].userLong) {
bound = LatLngBounds(southwest: currentLatLng, northeast: offerLatLng);
} else if (offerLatLng.longitude > currentLatLng.longitude) {
bound = LatLngBounds(
southwest: LatLng(offerLatLng.latitude, currentLatLng.longitude),
northeast: LatLng(currentLatLng.latitude, offerLatLng.longitude));
} else if (offerLatLng.latitude > currentLatLng.latitude) {
bound = LatLngBounds(
southwest: LatLng(currentLatLng.latitude, offerLatLng.longitude),
northeast: LatLng(offerLatLng.latitude, currentLatLng.longitude));
} else {
bound = LatLngBounds(southwest: offerLatLng, northeast: currentLatLng);
}
}
}
else if (userLatLongClosest < merchantLatLongClosest) {
if (offerLatLng.latitude > pingedList[0].merchantLat &&
offerLatLng.longitude > pingedList[0].merchantLong) {
bound = LatLngBounds(southwest: currentLatLng, northeast: offerLatLng);
} else if (offerLatLng.longitude > currentLatLng.longitude) {
bound = LatLngBounds(
southwest: LatLng(offerLatLng.latitude, currentLatLng.longitude),
northeast: LatLng(currentLatLng.latitude, offerLatLng.longitude));
} else if (offerLatLng.latitude > currentLatLng.latitude) {
bound = LatLngBounds(
southwest: LatLng(currentLatLng.latitude, offerLatLng.longitude),
northeast: LatLng(offerLatLng.latitude, currentLatLng.longitude));
} else {
bound = LatLngBounds(southwest: offerLatLng, northeast: currentLatLng);
}
} else {
if (offerLatLng.latitude > pingedList[0].userLat &&
offerLatLng.longitude > pingedList[0].userLong) {
bound = LatLngBounds(southwest: currentLatLng, northeast: offerLatLng);
} else if (offerLatLng.longitude > currentLatLng.longitude) {
bound = LatLngBounds(
southwest: LatLng(offerLatLng.latitude, currentLatLng.longitude),
northeast: LatLng(currentLatLng.latitude, offerLatLng.longitude));
} else if (offerLatLng.latitude > currentLatLng.latitude) {
bound = LatLngBounds(
southwest: LatLng(currentLatLng.latitude, offerLatLng.longitude),
northeast: LatLng(offerLatLng.latitude, currentLatLng.longitude));
} else {
bound = LatLngBounds(southwest: offerLatLng, northeast: currentLatLng);
}
}
CameraUpdate u2;
mapController.animateCamera(u2).then((void v) {
check(u2, mapController);
});
}
void check(CameraUpdate u, GoogleMapController c) async {
c.animateCamera(u);
googleMapController.animateCamera(u);
LatLngBounds l1 = await c.getVisibleRegion();
LatLngBounds l2 = await c.getVisibleRegion();
if (l1.southwest.latitude == -90 || l2.southwest.latitude == -90)
check(u, c);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
child: GoogleMap(
markers: markers,
mapType: MapType.normal,
compassEnabled: false,
initialCameraPosition: CameraPosition(
target: _center,
),
onMapCreated: _onOrderPinged,
myLocationEnabled: true,
myLocationButtonEnabled: false,
),
)
],
),
);
}
Upvotes: 1
Views: 2621
Reputation: 1950
I posted this question in a Reddit post. jamieownsu answered with a perfect function. It includes both markers and the user's location point too. His code:
static LatLngBounds getLatLngBounds(List<LatLng> list) {
double x0, x1, y0, y1;
for (final latLng in list) {
if (x0 == null) {
x0 = x1 = latLng.latitude;
y0 = y1 = latLng.longitude;
} else {
if (latLng.latitude > x1) x1 = latLng.latitude;
if (latLng.latitude < x0) x0 = latLng.latitude;
if (latLng.longitude > y1) y1 = latLng.longitude;
if (latLng.longitude < y0) y0 = latLng.longitude;
}
}
return LatLngBounds(northeast: LatLng(x1, y1), southwest: LatLng(x0, y0));
}
mapController.animateCamera(CameraUpdate.newLatLngBounds(getLatLngBounds(...))
https://www.reddit.com/r/FlutterDev/comments/mrbodl/google_maps_flutter_update/
Upvotes: 1