在 react-google-maps 中添加航点答案

【问题标题】：adding waypoints in the react-google-maps在 react-google-maps 中添加航点
【发布时间】：2018-05-10 19:57:59
【问题描述】：

editable samplecode 如何在下面的代码中使用航点，航点是否有助于绘制我在数据库中更新的方式，无论这些点将基于我更新的点

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 />
    )
  }

【问题讨论】：

您能解释一下您要达到的目标吗？
以上代码将根据谷歌路线给出起点和目的地之间的路线我需要根据我的航点制作路线

标签： google-maps-api-3 react-google-maps

【解决方案1】：

您可以通过在您的路线请求中添加 DirectionsWaypoint 的 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}`);
   }
});

【讨论】：

你知道如何在 react-native-maps 中启用默认缩放按钮？
很高兴我能帮上忙！对于您的新问题，我建议您创建一个新帖子，以便其他人也可以帮助您。
用这个链接检查stackoverflow.com/questions/47676655/…

【解决方案2】：

在 React 中实现 wayPoints 的一种非常简单的方法

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;

在你的 Map.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;

我相信这没问题

【讨论】：