如何使用google-map-react绘制路线？
使用google-map-react绘制路线可以通过以下步骤实现：
- 首先，确保你已经在项目中安装了google-map-react库。可以使用npm或者yarn进行安装。
- 在你的项目中引入google-map-react库，并在代码中创建一个地图组件。
import React from 'react';
import GoogleMapReact from 'google-map-react';
const Map = () => {
return (
<div style={{ height: '400px', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: 'YOUR_API_KEY' }}
defaultCenter={{ lat: 37.7749, lng: -122.4194 }}
defaultZoom={10}
>
</GoogleMapReact>
</div>
);
}
export default Map;在上面的代码中，我们创建了一个名为Map的组件，并在其中使用GoogleMapReact组件来渲染地图。需要注意的是，你需要将YOUR_API_KEY替换为你自己的Google Maps API密钥。
- 接下来，我们需要在地图上绘制路线。可以使用DirectionsService和DirectionsRenderer来实现。
import React, { useEffect } from 'react';
import GoogleMapReact from 'google-map-react';
const Map = () => {
useEffect(() => {
const directionsService = new window.google.maps.DirectionsService();
const directionsRenderer = new window.google.maps.DirectionsRenderer();
const map = new window.google.maps.Map(document.getElementById('map'), {
center: { lat: 37.7749, lng: -122.4194 },
zoom: 10,
});
directionsRenderer.setMap(map);
const calculateAndDisplayRoute = (directionsService, directionsRenderer) => {
directionsService.route(
{
origin: { lat: 37.7749, lng: -122.4194 },
destination: { lat: 37.7749, lng: -122.4316 },
travelMode: 'DRIVING',
},
(response, status) => {
if (status === 'OK') {
directionsRenderer.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
}
);
};
calculateAndDisplayRoute(directionsService, directionsRenderer);
}, []);
return (
<div id="map" style={{ height: '400px', width: '100%' }}></div>
);
}
export default Map;在上面的代码中，我们使用DirectionsService来计算路线，并使用DirectionsRenderer来在地图上渲染路线。在useEffect钩子中，我们创建了一个地图实例，并将DirectionsRenderer与地图关联起来。然后，我们调用calculateAndDisplayRoute函数来计算并显示路线。
需要注意的是，为了使用DirectionsService和DirectionsRenderer，你需要在index.html文件中引入Google Maps API的脚本。
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>确保将YOUR_API_KEY替换为你自己的Google Maps API密钥。
这样，当你在浏览器中渲染Map组件时，你将看到地图上绘制了从起点到终点的路线。
推荐的腾讯云相关产品：腾讯云地图服务（https://cloud.tencent.com/product/maps）
相关·内容
如何使用npm google-map-react绘制路由？
这就是我的东西
this.map =(缩放，纬度，lng) => {让DirectionsService =新的window.google.maps.DirectionsService()；
<code>A0</code>
浏览 17提问于2018-12-17得票数 2
1回答
我需要绘制一条从用户当前位置到目的地地址的路线。现在假设用户选择了不同的路线，我需要重新绘制路线。我应该如何继续？
很明显，我不会一直根据用户的位置来绘制路线。只有当用户选择不同的路线时，我才需要重新绘制
浏览 1提问于2015-02-01得票数 0
2回答
谷歌地图的样式-反应地图
、、、
我正在用google-map-react构建一张地图，并试图在没有运气的情况下对它进行样式设计。我在这里使用文档：和通过一个名为options的道具添加样式，就像它说的那样，但是我没有看到任何样式被应用。
这是我的代码：
const createMapOptions = () => {
return {
styles: [{stylers: [{'saturation': -100}, {'gamma': 0.2}, {'lightness': 4}, {'visibility': 'on'}]}
浏览 1提问于2020-08-22得票数 2
目前，我在与reactJS一起使用时遇到了这个错误。我学习了的例子
错误是：
元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但got:未定义。检查MyComponent的呈现方法
下面是MyComponent.tsx的内容。
进口报表：
import GoogleMapReact from 'google-map-react';
国家地图
state = {
center: [ 49.872768, 8.651180 ],
zoom: 14
};
和呈现()方法
render() {
ret
浏览 2提问于2018-01-28得票数 0
1回答
我正在写一个组件，在地图上绘制一条路线和两个标记，我有一个循环，它获得绘制标记的所有位置，但我没有在时间上获得数组来渲染数据。 我试着设置了一个条件，但似乎不起作用。问题在于状态，我将数组置于一种状态，但由于异步进程，我无法在时间上获得它来呈现。 import React, { useEffect, useState } from 'react';
import GoogleMapMaker from './GoogleMapMarker';
import GoogleMapReact from 'google-map-react';
co
浏览 36提问于2019-01-23得票数 0
3回答
我很好奇谷歌地图是如何在谷歌地图上的DIV元素上绘制蓝色路线的。我知道如何在画布元素上这样做，但谷歌地图不使用HTML5画布，他们在DIV线上绘制复杂的线条。
他们是怎么做到的？
需要明确的是:我想知道当我们得到从A点到B点的方向时，他们是如何绘制蓝线的，而不是如何计算路线的。
谢谢
浏览 0提问于2010-11-15得票数 3
回答已采纳
2回答
我有插入静态地图(地图图像)的美国。用户将通过单击地图来选择来源和目的地，当单击显示路由按钮时，将在地图上绘制路线。如何在选定的位置之间绘制路线？
浏览 1提问于2011-08-01得票数 1
我想用虚线在地图上用这里的地图画路线
在此地图中使用Maproute API，可以更改路线的颜色。路线怎么样？可以画虚线吗？我可以自定义它吗？
另外，Maproute API中的setRenderType()的用法是什么
如何绘制虚线作为路线？
虚线预计将作为地图上的路线绘制
浏览 7提问于2019-09-17得票数 0
2回答
我在我的代码库中使用了以下代码： https://github.com/google-map-react/google-map-react 但是他们没有解释用于map和map的类型，这给了我打字错误。将其更改为object不会有太大帮助。 const handleApiLoaded = (map: any, maps: any) => { 地图和地图的正确类型是什么？谢谢。
浏览 10提问于2019-09-26得票数 0
回答已采纳
1回答
我在开发一个校园导航应用。
我有一张显示校园建筑的图片。
我想画一条从用户位置到用户想要去的目标建筑的路线。
想知道如何在静态自定义图像上绘制路线。
我在网上搜索，但是找不到任何关于如何发展的线索。
互联网上的所有文档都是关于在谷歌地图上绘制路线的。
任何提示都将非常感谢。
浏览 3提问于2011-06-24得票数 2
我希望MKPolylineView lineWidth在每次放大或缩小MKMap时都是相同的？
我正在使用MKPolylineView绘制从A到B的路由，其中包含路由上的所有指定点。
我想在meters.suppose中找到指定距离的路线周围的走廊(多边形)，其5公里(5000米)。因此，道路将与路线一起绘制在地图视图上。
我附上最终的图像作为输出。
如何在路线周围绘制走廊(多边形)？
如何做到这一点？
浏览 2提问于2013-04-10得票数 2
6回答
我正在开发一个有两个版本的应用程序。一个用于web，另一个用于iPhone。
在web应用程序中，我可以在道路上(自动绘制道路/高速公路上的路线)和非道路上(在两个特定点之间绘制直线)绘制路线。
有没有iPhone的应用程序接口，可以用来在地图上绘制路线？我可以在地图上的两个节点之间画一条直线，但我不能在iPhone中绘制路线图路线。
我使用的是iPhone 3.0和SDK3.0
谢谢。
浏览 3提问于2009-07-06得票数 19
回答已采纳
1回答
我有一个可以四处移动的红点和一个可以随意编辑的空白背景。我的目标是根据我将在背景上绘制的路线来移动这个点，我可以取我的中心点，绘制或检测我的路线，但我不知道这个点如何沿着这条路线走。你能和我分享你的想法吗？ ? ?
浏览 9提问于2021-04-25得票数 0
回答已采纳
1回答
我正在用QT编写一个应用程序，它将在widget.And中显示地图，它还会在给定坐标的情况下绘制从起点到终点的路线。现在的问题是，如果我只是想撤消绘制路线(我的意思是擦除)，下面的.The代码片段将是我如何绘制的。
QGeoMapRouteObject *route = new QGeoMapRouteObject(reply->routes().at(0));
QColor routeColor(Qt::blue);
routeColor.setAlpha(127);
QPen pen(routeColor);
pen.setWidth(3);
浏览 4提问于2012-05-16得票数 0
如何在谷歌地图v2上绘制从一个位置到另一个位置的路线？
我用v2接口做了一个简单的应用程序，但现在我要在地图上绘制到不同位置的路线。
有可能吗？提前感谢！:)
浏览 0提问于2012-12-30得票数 0
回答已采纳
我正在尝试使用google-map-react，但当我尝试呈现它时，什么也没有出现。我是不是遗漏了什么？
import GoogleMap from 'google-map-react';
import React, { Component } from 'react';
class GMaps extends Component {
static defaultProps = {
center: {lat: 59.95, lng: 30.33},
zoom: 11
};
render() {
return (
<d
浏览 16提问于2017-03-01得票数 3
1回答
在Mapbox数据集编辑器中，是否有一种简单的方法可以绘制(或通过路径点定义)一条快速到达道路中心线的驾驶路线，就像在Google 中那样？我知道如何绘制点，线和多边形，但没有选择驾驶(或步行/骑自行车)路线。
如果没有，是否有建议的解决办法？我看到了，但是导入的路线并没有被抢断到Mapbox公路上。
谢谢
浏览 3提问于2021-01-11得票数 0
回答已采纳
1回答
我想给我的用户绘制路线的能力，当用户绘制路线时，我将停止滚动。
我希望能够绘制路线，并获得路线上的所有经度点。
浏览 1提问于2014-06-10得票数 0
1回答
我有两个覆盖图，一个是(ItemizedOverlay)用于在地图上放置标记，另一个是(覆盖图)用于绘制从源到目的地的路线。根据地图上标记的变化，在地图上绘制路线是很好的。但问题是之前绘制的路线不能被擦除来绘制新的路线。
我试过mapView.getOverlays().clear()了。但它同时删除了标记和路线。
有没有可能在mapview的两个已定义的覆盖中获得一个覆盖对象？
浏览 2提问于2012-07-01得票数 0
回答已采纳
2回答
我刚刚按照本教程在iOS 7 地图上绘制了一条路线
这很好，但我找不到如何在不同的颜色上画出不同的路线，而且当我触摸每一条路线时都会改变颜色。使用此代码，所有路由都以相同的颜色绘制：
- (MKOverlayRenderer *)mapView:(MKMapView *)mapView rendererForOverlay:(id < MKOverlay >)overlay
{
MKPolylineRenderer *renderer =
[[MKPolylineRenderer alloc] initWithOverlay:overlay];
浏览 5提问于2014-02-03得票数 0
回答已采纳
我正在使用谷歌地图Api V2，我可以在两个points.But之间标记或绘制一条线我尝试通过bus.So路线绘制一条线，路线，公交车的停车places...etc已经known.First的所有，我试图找到路线的所有LatLong值，我绘制它为折线，但我猜它是浪费time.So我想绘制线没有找到所有的LatLong点的bus.Is路线有任何方式？
谢谢你的帮助..
浏览 3提问于2013-09-18得票数 0
1回答
我正试图在谷歌地图上得到当前的位置。当我得到坐标的时候，代码工作得很好，但是这些坐标是我想要得到的，谷歌地图也是一样的，因为现在，坐标对于google地图是静态的。
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import { withGoogleMap, GoogleMap, Marker } from "google-map-react"
import { InfoWindow } from 'goo
浏览 1提问于2018-05-12得票数 0
回答已采纳
1回答
我正在使用GoogleMaps绘制路线。我想做的是，当用户在这条路线上旅行时，去掉已经走过的线路(就像Uber那样)。我想我们可以从折线中移除点并重新绘制它。这是正确的做法吗？
我如何才能知道这些点是经过的，并需要更新路径？
浏览 1提问于2018-04-09得票数 4
2回答
我可以在我的应用程序中绘制三条路线(使用google map api)，我可以使用kml绘制一条路线，现在我想在两个点之间绘制三条不同的路线，例如步行，自行车，公交车等等。
浏览 2提问于2011-06-20得票数 0
1回答
我在我的应用程序中使用KMLParser解析了一个kml文件。当我在google地图中打开kml文件时，它会向我显示带有注释和覆盖的路线。
1)是否可以从kml中获取路线数据，以便在地图上绘制路线
2)若否，如何从kml文件中提取路线图？
任何建议或提示都会很有帮助。
浏览 2提问于2013-06-27得票数 0
在我的应用程序中，用户可以插入多个位置并在地图上显示。我如何才能做到这一点？我知道如何在两个地点之间绘制路线，但我想像图像一样在多个标记之间绘制路线。
在图像标记中显示用户输入位置。我还想计算标记之间的距离，比如计算B到C和C到D之间的距离。
我如何才能做到这一点？？
浏览 3提问于2019-03-01得票数 5
我正在开发一个使用Google Maps javascript API v3的Javascript web应用程序。地图允许用户做的一件事是沿着街道绘制路线。然而，我希望用户能够沿着街景的街道绘制路线，我遇到了一个小问题……
在地图对象上拖动黄色街景人时，所有有效的街景街道将以蓝色亮起。但是，有时这些街道与实际地图不能正确对齐，而有时地图上的街道并未显示为街道视图。我的问题是，如何才能在地图上显示“有效街景区域”，而不拖拽黄色的家伙？有没有一层我可以激活的？
我希望这个图层在任何时候都是可见的，这样用户就可以知道他们正在绘制的路线所在的街道是否有街景，并能够确保他们的路线与街景网格对齐。
谢谢
浏览 0提问于2012-08-03得票数 13
1回答
我想开发一个多画图:一个应用程序，每个用户都可以在地图上绘制路线，保存路线，最后所有保存的路线将被“合并”成一个大图片(就像photoshop中的图层)。
如何保存路由？要绘制的像素列表？是否将其保存为图片(带透明背景？)
该应用程序将在WPF中开发(在触摸设备上)。
非常感谢
浏览 4提问于2012-10-23得票数 0
回答已采纳
我正在制作一个android应用程序，我想向用户展示一条路线，但是如果我通过
map.addPolyline(new PolylineOptions(...));
看起来糟透了。只是一条坚固的线。谷歌如何用边界绘制它的渐变路线线？
其他开发商是否有可能画出这条路线呢？
浏览 8提问于2013-11-28得票数 1
回答已采纳
正如问题所述，如何在Google Map上的两个点之间绘制折线或曲线，就像这样：
但要避免在两点之间画任何一条线。
我想使用这个功能来绘制动态的邮轮行程。不要考虑非常复杂的路线，简单的东西。
例如，假设我有这样的位置:巴塞罗那、马赛、尼斯、热那瓦、那不勒斯、巴勒莫和巴塞罗那。
如果我画直线，它看起来像这样：相反，我想实现像这样的东西：
或者，有没有办法使用/访问渡轮路线并在其上绘制？
浏览 4提问于2015-03-10得票数 3
1回答
我有一个固定的纬度和经度，所以我使用了它，并使用pin在mapview中获得了该点。现在我想要当前的位置和绘制路线，所以我想使用gps我可以得到纬度和经度。使用这个位置(纬度和经度)，我必须用我的固定值(纬度和经度)绘制一条路线。这怎么可能..？这是正确的方法吗?如何用两点画路线？
我使用了委托方法，但它没有调用，
- (void)locationManager:(CLLocationManager *)manager didUpdateToLocation:(CLLocation *)newLocation
fromLocation:(CLLocation *)oldL
浏览 0提问于2012-02-26得票数 1
回答已采纳
Google导航只显示给定路线的交通层。使用GoogleMap.setTrafficEnabled(true)，我将获得整个地图的交通信息。
我知道如何从Google Directions中为一条路线绘制折线，但我如何才能只为该路线打开交通图层？
浏览 0提问于2013-05-31得票数 6
回答已采纳
给定两个地理上本地化的点(路线的起点和终点)，我希望在它们之间绘制路线的动画。
你知道如果使用Google map js v3 api是如何实现的吗？
谢谢
浏览 2提问于2012-07-17得票数 13
通过使用该方法
SKRouteManager.getInstance().calculateRoute(route);
先前绘制的地图将被删除并替换。有没有可能获得路线的坐标列表，而不必删除地图上当前绘制的路线，也不必创建路线并对其进行缓存？
浏览 16提问于2016-08-27得票数 2
回答已采纳
我正在实施谷歌地图，以便在Android应用程序中绘制两个位置之间的路线。路由正在显示，但当用户在运行时偏离路线(运行时)，我无法更新路由。
问:如何检查用户是否偏离了路线，以及如何在没有刷新地图的情况下更新谷歌地图上的路径。请帮忙，
谢谢,
尼沙
浏览 0提问于2017-03-28得票数 1
1回答
我正在沿着iOS中绘制的路线移动地图注释，但我希望它遵循方向给定的路径。所以为了清楚起见，我想要一个模拟用户沿着地图的路线，而不是实际做路线。我试过做研究，是的，我看过面包屑教程，但我真的不确定如何按照所描述的路线进行。有什么方法可以将路线分解为点/数据来获取地图吗？
任何帮助或链接都是非常感谢的。
浏览 3提问于2013-01-26得票数 2
如何使用Google Maps API绘制路线？例如，将一系列路点加载到地图上(我目前有此功能)，并在每个路点上画一条线，向用户显示他们可以看到所有路点的路线？当用户看到的是地图时，我该如何加载呢？
浏览 1提问于2010-08-04得票数 24
回答已采纳
2回答
有一种简单的方法可以使用Google Maps创建动态的、可定制的和可管理的Web应用程序，并能够绘制路线，我的意思是，可以通过XML绘制车辆路线或自行车路线？？
谢谢！！
浏览 2提问于2010-11-17得票数 2
回答已采纳
我打算在地图上画出城市中不同公共汽车的路线。一旦我绘制了这些路线，我只想向用户展示路线，例如，从公交车1的a点到b点，等等。
由于这是一个基于web的移动应用程序，我计划使用(HTML5，Javascript，jQuery，Ajax)
任何关于如何创建或绘制地图的帮助/教程都会很有帮助。我个人没有任何绘画或使用地图api的经验。
浏览 0提问于2014-03-09得票数 0
尝试导入错误：'GoogleApiWrapper‘不是从'google-map-react’导出的。我正在获取这个问题帮助我我正在尝试将google地图放入我的项目中
浏览 7提问于2021-11-08得票数 0
我已经将谷歌地图嵌入到我的页面中，并在其上显示各种标记。
每当用户单击标记时，就会在地图上绘制用户当前位置和该标记之间的路线。
为了实现这一点，我以如下方式使用google.maps.DirectionsService()：
var directionService = new scp.google.maps.DirectionsService();
var requestDriving = {
| origin: start,
浏览 1提问于2017-09-14得票数 0
1回答
问题:我想从shapefile中提取两个车站之间的铁路网络上的一条路线，并且只绘制这条特定的路线，而不是整个网络。
这就是我到目前为止所知道的：
我有一个包含英国整个铁路网络的shapefile，它是这样绘制的：
library(maptools)
rail <- readShapeSpatial("railnetworkLine.shp")
我还有一个包含Eastings和Northing的站点列表，例如：
1) ABDARE 300400 202800
2) DEIGHTN 416490 419140
我可以将它们添加到地图中，它看起来像这样：
plo
浏览 4提问于2016-01-20得票数 7
基本上，我需要实现的是，首先绘制两点之间的路线，从当前位置到地图上的任何其他点。当第三点被放置时，路线必须从目前的第三点转变为第三点，最后从第三点到最后一点。
供参考，
A点-电流/起动位置
B点-末端位置
C点-第三个地点
任务
1)从A到B的绘制点
2)如果放置C点，则从A到C和C到B绘制。
我如何实现这一点？
谢谢
浏览 6提问于2017-09-11得票数 1
2回答
我不想做的是显示从地图上的一些移动设备中选择的位置。关于地点的数据在那里。
这里我需要的是根据从服务器接收的数据在地图上添加标记。
假设我已经将位置数据({Lat，Lang})设置为状态标记，那么如何添加它以在地图中显示。
我的地图代码如下！
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = ({ text }) => <div>{text}</div&g
浏览 0提问于2017-05-12得票数 4
回答已采纳
我在一个Android项目中工作，我想在谷歌地图上绘制2点之间的路线。我已成功绘制了源点和目标点之间的路由。但我有一个问题，有时我想在两个以上的点之间画一条路径，那时候我写的代码是在第一个和最后一个位置之间绘制路径，并离开中点位置。我真正想要的是我的路线应该通过中点到达目的地。我如何才能做到这一点？
浏览 0提问于2018-07-01得票数 1
我已经在StackOverflow和谷歌上搜索过了。但我没有找到真正的答案。我认为在Android中没有DirectionsRenderer。但你能承认吗？
如果没有DirectionsRenderer，我如何使用Android显示GoogleMaps并在地图上绘制路线？
我想画一条好路线。不仅仅是每条路线的坐标之间的线-也是从指示中传递的-请求。
浏览 2提问于2013-08-15得票数 0
回答已采纳
1回答
当我点击Google Map时，我想要为该位置添加一个标记。这只适用于一个例外:当我单击我绘制的一条路线时，它不起作用。因为单击事件只在地图本身上，而不在路线上。但是我找不到我绘制的路线的任何点击事件。(我查看了文档)。
有谁有关于如何做到这一点的建议吗？
所以我需要一个点击功能的路线，以及不仅仅是地图。
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
浏览 0提问于2012-12-09得票数 1
回答已采纳
我一直在遵循下面文章中的代码，
我让它在iOS上运行得很好，但是每当我运行Android时-折线路线不会在地图上绘制。地图已绘制，但路线未显示。
不会给出错误或警告。
我在Android CustomMapRenderer ()的两个方法中都设置了断点，但都没有命中。
任何关于如何调用这些方法并在android应用程序中绘制折线的建议都将不胜感激。
再次感谢。
浏览 0提问于2017-03-28得票数 0
嗨，在LocationManager的帮助下，我设法找到了安卓系统中的当前位置。为了显示两个地理坐标之间的路线，我应该使用什么，这样我就不会绘制空中距离，而是显示地面路线，还是在json的帮助下我可以绘制路线。
我尝试过polyLine()，但它给出的是直线。
浏览 6提问于2013-03-05得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
