代码之家 › 专栏 › 技术社区 › pageNotfoUnd

在react google maps中添加航路点

react-google-maps google-maps-api-3

5

pageNotfoUnd · 技术社区 · 7 年前

editable samplecode 如何在以下代码中使用航路点航路点有助于绘制我在数据库中更新的方式,而ponits将基于我更新的点吗

const DirectionsService = new google.maps.DirectionsService();
                 const  DirectionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true},{strokeColor:"#4a4a4a"});

      DirectionsService.route({

        origin: new google.maps.LatLng(this.state.orgin.latitude ,this.state.orgin.longitude),
         destination: new google.maps.LatLng(this.state.destination.latitude ,this.state.destination.longitude),
          travelMode: google.maps.TravelMode.DRIVING,

      }, 
       (result, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
          this.setState({
            directions: result,
          });
        } else {
          console.error(`error fetching directions ${result}`);
        }
      });

            }).catch(function (err) {

            });

    }

  })

)(props =>
  <GoogleMap
    defaultZoom={50}>
     <DirectionsRenderer directions={props.directions}   />

  < Marker

  position={{  lat:props.delivery!=undefined?props.delivery.latitude:null, lng:  props.delivery!=undefined?props.delivery.longitude:null }} />

  </GoogleMap>

);
    return (
      <MapWithADirectionsRenderer />
    )
  }

2 回复 | 直到 7 年前

1

6

James Solomon Belda 7 年前

您可以通过在方向请求中添加方向waypoints[]阵列waypoints来添加航路点。

您可以查看此文档以了解更多信息: https://developers.google.com/maps/documentation/javascript/directions#DirectionsRequests

以下是一个航路点阵列示例:

waypoints: [
    {
        location: new google.maps.LatLng(14.546748, 121.05455)
    },
    {
        location: new google.maps.LatLng(14.552444,121.044488)
    }
]

这是一个带有航路点的方向请求示例:

DirectionsService.route({
   origin: new google.maps.LatLng(14.533593, 121.053128),
   destination: new google.maps.LatLng(14.550895, 121.025079),
   travelMode: google.maps.TravelMode.DRIVING,
   waypoints: [
        {
           location: new google.maps.LatLng(14.546748, 121.05455)
        },
        {
           location: new google.maps.LatLng(14.552444,121.044488)
        }
   ]
}, (result, status) => {
   if (status === google.maps.DirectionsStatus.OK) {
      this.setState({
         directions: result,
      });
   } else {
     console.error(`error fetching directions ${result}`);
   }
});

2

1

Emmanuel Adebayo 5 年前

在React中实现航路点的一种非常简单的方法

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { withScriptjs } from "react-google-maps";




import  Map from './components/Map';

function App() {

  const MapLoader = withScriptjs(Map);

  return (

<div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />

  </header>
  <MapLoader
      googleMapURL="https://maps.googleapis.com/maps/api/js?key=Key"
      loadingElement={<div style={{ height: `100%` }} />}
  />
</div>
  );
}

export default App;

在你的地图上。js文件

/*global google*/
import React, { Component } from "react";
import {
    withGoogleMap,
    withScriptjs,
    GoogleMap,
    DirectionsRenderer
} from "react-google-maps";
class Map extends Component {
    state = {
        directions: null,


};

componentDidMount() {
    const directionsService = new google.maps.DirectionsService();

    const origin = { lat: 6.5244, lng:  3.3792 };
    const destination = { lat: 6.4667, lng:  3.4500};

    directionsService.route(
        {
            origin: origin,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING,
            waypoints: [
                {
                    location: new google.maps.LatLng(6.4698,  3.5852)
                },
                {
                    location: new google.maps.LatLng(6.6018,3.3515)
                }
            ]
        },
        (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
                console.log(result)
                this.setState({
                    directions: result
                });
            } else {
                console.error(`error fetching directions ${result}`);
            }
        }
    );
}

render() {
    const GoogleMapExample = withGoogleMap(props => (
        <GoogleMap
            defaultCenter={{ lat: 6.5244, lng:  3.3792 }}
            defaultZoom={13}
        >
            <DirectionsRenderer
                directions={this.state.directions}
            />
        </GoogleMap>
    ));

    return (
        <div>
            <GoogleMapExample
                containerElement={<div style={{ height: `500px`, width: "500px" }} />}
                mapElement={<div style={{ height: `100%` }} />}
            />
        </div>


       );
    }
}

export default Map;

我相信这没关系