【问题标题】:Center markers and user location in google maps flutter谷歌地图中的中心标记和用户位置颤动
【发布时间】:2021-07-10 08:36:46
【问题描述】:

我有一张带有两个标记的地图,我设法将它们居中。我不确定这种方式是否是正确的,或者是使两个标记居中的最有效方式,但它似乎工作得很好。

我的问题是我也将“myLocationEnabled”设置为 true(地图上的蓝点代表您,即用户)。我需要将谷歌地图的相机聚焦在这些标记和用户位置之间的中心。所以现在,我需要在三个点之间居中。

如果最好的选择是创建一个自制标记来表示用户的位置,我如何将相机置于三个标记之间?

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,
                  ),
                )
  ],
 ),
);
}

【问题讨论】:

    标签: flutter google-maps dart google-maps-markers google-maps-flutter


    【解决方案1】:

    我在 Reddit 帖子中发布了这个问题。 jamieownsu 以完美的功能回答。它也包括标记和用户的位置点。他的代码:

    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/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-10-23
      • 2023-03-13
      • 2022-11-02
      • 1970-01-01
      • 2022-01-10
      • 1970-01-01
      • 2011-04-27
      • 1970-01-01
      相关资源
      最近更新 更多