如何在react-google-maps中设置起点

如何解决如何在react-google-maps中设置起点

我正在开发一个我正在使用的应用程序react-google-maps，我在我的应用程序中集成了多个停止功能。现在我想设置它的起点，例如，我想从它的起点绘制多个停靠点，它必须是一个带有文本的标记（开始）。我真的尝试过但无法解决此解决方案，我还将附上我想要实现的目标的图像。

代码

import React,{ useState } from "react";
import {
  GoogleMap,InfoWindow,Marker,polyline,} from "@react-google-maps/api";

function Map({ scheduledOrders }) {
  const [activeMarker,setActiveMarker] = useState(null);

  let markers =
    scheduledOrders !== undefined &&
    scheduledOrders &&
    scheduledOrders[0] &&
    scheduledOrders[0].map((item,index) => ({
      id: index + 1,name: item.customerName + " - " + item.customerAddress,position: {
        lat: Number(item && item.order_lat,10),lng: Number(item && item.order_lng,},}));


  console.log("@@@markser",markers);

  const handleActiveMarker = (marker) => {
    if (marker === activeMarker) {
      return;
    }
    setActiveMarker(marker);
  };

  const handleOnLoad = (map) => {
    const bounds = new window.google.maps.LatLngBounds();
    markers && markers.forEach(({ position }) => bounds.extend(position));
    map.fitBounds(bounds);
  };

  return (
    <GoogleMap
      onLoad={handleOnLoad}
      onClick={() => setActiveMarker(null)}
      mapContainerStyle={{ width: "100%",height: "88vh" }}
    >
      <polyline
        path={
          scheduledOrders !== undefined &&
          scheduledOrders &&
          scheduledOrders[0] &&
          scheduledOrders[0].map((item) => ({
            lat: Number(item && item.order_lat,}))
        }
        options={{
          strokeColor: "#07966B",strokeOpacity: 1,strokeWeight: 2,icons: [
            {
              icon: "hello",offset: "0",repeat: "10px",],}}
      />
      {markers &&
        markers.map(({ id,name,position }) => (
          <Marker
            key={id}
            position={position}
            onClick={() => handleActiveMarker(id)}
            label={{ text: `${id}`,color: "white" }}
          >
            {activeMarker === id ? (
              <InfoWindow onCloseClick={() => setActiveMarker(null)}>
                <div>{name}</div>
              </InfoWindow>
            ) : null}
          </Marker>
        ))}
    </GoogleMap>
  );
}

export default Map;

解决方法

您的代码对于折线的起点和终点路径似乎具有相同的坐标。为了实现您的用例，我有两种方法可以解决这个问题。

这里是第一个，你需要先得到你的起点的坐标并将它放在一个单独的变量中。然后你需要为这个坐标创建一个单独的 return Provider<ShoppingBasket>( create: (context) => ShoppingBasket(),child: Consumer<OurUser>( builder: (_,user,__) { return ChangeNotifierProvider<SignInViewModel>( create: (_) => SignInViewModel(context.read),builder: (_,child) { return Scaffold( appBar: AppBar( title: Text("My app"),actions: [ OurShoppingBasketIcon(),IconButton( icon: Icon( Icons.logout,color: Colors.white,),onPressed: () { context.read<FirebaseAuthService>().signOut(); },],); },); 对象，条件是它会检查是否起始坐标变量有值。这将创建一个单独的 Marker 对象，您可以自定义。 接下来，您只需要在 <Marker> 变量中映射所有中间（航点）坐标。

这是我制作的 https://stackoverflow.com/a/53237056/870135 和代码片段。我刚刚从 json 文件中传递了 scheduleOrders 值。

markers

第二种方法是简单地将条件放在您的 import React,{ useState } from "react"; import { GoogleMap,InfoWindow,Marker,Polyline } from "@react-google-maps/api"; import scheduledOrders from "./data.json"; function Map() { const [activeMarker,setActiveMarker] = useState(null); let startMarker = null; let wayptMarker = []; //get the first point and put it in a startMarker variable then put the middle points in an array(wayptMarker) scheduledOrders.map((item,index,arr) => { if (index == 0 || index == arr.length - 1) { //Since the start and end point are the same,I only get the start point details in my startMarker variable if (index == 0) { startMarker = item; } } else { wayptMarker.push(item); } }); //put your startposition here let startPosition = { lat: startMarker.order_lat,lng: startMarker.order_lng }; //put your start name here let startName = startMarker.customerName + " - " + startMarker.customerAddress; let markers = scheduledOrders !== undefined && scheduledOrders && wayptMarker.map((item,index) => ({ id: index + 1,name: item.customerName + " - " + item.customerAddress,position: { lat: Number(item && item.order_lat,10),lng: Number(item && item.order_lng,10) } })); console.log("@@@markser",scheduledOrders); const handleActiveMarker = marker => { if (marker === activeMarker) { return; } setActiveMarker(marker); }; const handleOnLoad = map => { const bounds = new window.google.maps.LatLngBounds(); markers && markers.forEach(({ position }) => bounds.extend(position)); map.fitBounds(bounds); }; return ( <GoogleMap onLoad={handleOnLoad} onClick={() => setActiveMarker(null)} mapContainerStyle={{ width: "100%",height: "88vh" }} > <Polyline path={ scheduledOrders !== undefined && scheduledOrders && scheduledOrders[0] && scheduledOrders.map(item => ({ lat: Number(item && item.order_lat,10) })) } options={{ strokeColor: "#07966B",strokeOpacity: 1,strokeWeight: 2,icons: [ { icon: "hello",offset: "0",repeat: "10px" } ] }} /> {/* I created a marker solely for startMArker where you can customize the icon for this only marker */} {startMarker != null && ( <Marker key="start" position={startPosition} onClick={() => handleActiveMarker("start")} label={{ text: `START`,color: "black" }} icon="http://maps.google.com/mapfiles/kml/shapes/arrow.png" > {activeMarker === "start" ? ( <InfoWindow onCloseClick={() => setActiveMarker(null)}> <div>{startName}</div> </InfoWindow> ) : null} </Marker> )} {/* The following Marker object will only create markers for the middle points */} {markers && markers.map(({ id,name,position }) => ( <Marker key={id} position={position} onClick={() => handleActiveMarker(id)} label={{ text: `${id}`,color: "white" }} > {activeMarker === id ? ( <InfoWindow onCloseClick={() => setActiveMarker(null)}> <div>{name}</div> </InfoWindow> ) : null} </Marker> ))} </GoogleMap> ); } export default Map; 对象中，该对象将检查您映射的 <Marker> 是第一个还是最后一个，然后它会显示一个{{1} } 对象作为起点，如果不是，则使用不同的 markers 对象来显示您的航点。

以下是 sample code 和代码片段：

<Marker>