谷歌地图突出显示路径中拖动的路径
Posted
技术标签:
【中文标题】谷歌地图突出显示路径中拖动的路径【英文标题】：Google Map Highlight the Path on Drag in the Route 【发布时间】：2018-06-16 13:15:07 【问题描述】：我正在使用 react js 来实现这个地图。默认情况下，我将在 Google 地图中设置一条红色路线。在同一条路线中，我需要突出显示一些将以黑色突出显示的特定路径，如下所示：
在图片的右侧，会有一个钢笔图标。当我点击图标时，我只需要在红线上突出显示特定路径。如图所示，高亮路径将显示为黑色。然后我需要根据默认路径计算突出显示路径的距离。
注意： 默认路由路径起点和终点在同一点，起点用标志图标表示。 起点和终点将不相同。他们将根据用户的反应而改变。
class MappedRoutes extends React.Component
constructor(props)
super(props);
this.drawFreeHand = this.drawFreeHand.bind(this);
componentDidMount()
const routeCoordinatesArr = [];
map(routeMapped.route.routeCoordinates, el =>
routeCoordinatesArr.push(
lat: parseFloat(el.lat),
lng: parseFloat(el.lng)
);
);
this.mapLocation(routeCoordinatesArr);
mapLocation(routecoordinates)
let currentMarker;
let snapToRoute;
this.map = new google.maps.Map(document.getElementById('map'),
center: lat: routecoordinates[0].lat, lng: routecoordinates[0].lng ,
minZoom: 3,
zoom: 14,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
);
// Google map direction service for draw routes
const flightPath = new google.maps.Polyline(
path: routecoordinates,
geodisc: true,
avoidTolls: true,
strokeColor: '#db3eb1',
strokeOpacity: 1,
strokeWeight: 3,
);
flightPath.setMap(this.map);
google.maps.event.addDomListener(flightPath, 'click', evt =>
currentMarker = new google.maps.Marker(
position: evt.latLng,
map: this.map,
draggable: true,
icon: iconPencile,
);
const snapToRoute = new SnapToRoute(this.map, currentMarker, flightPath);
this.drawFreeHand(currentMarker);
);
drawFreeHand(marker)
const highlightValue = this.props;
const path = new google.maps.MVCArray();
const service = new google.maps.DirectionsService();
const polyline = new google.maps.Polyline(
map: this.map,
fillColor: '#ffd83c',
fillOpacity: 0.8,
strokeColor: '#ffd83c',
strokeOpacity: 0.8,
strokeWeight: 5,
clickable: false,
editable: false,
);
google.maps.event.addListener(marker, 'drag', event =>
if (path.getLength() === 0)
path.push(event.latLng);
polyline.setPath(path);
else
service.route(
origin: path.getAt(path.getLength() - 1),
destination: event.latLng,
travelMode: google.maps.DirectionsTravelMode.WALKING,
,
(result, status) =>
if (status === google.maps.DirectionsStatus.OK)
for (let i = 0, len = result.routes[0].overview_path.length; i < len; i += 1)
path.push(result.routes[0].overview_path[i]);
);
);
render()
return (
<div>
<div onClick=this.drawFreeHand>click to highlight</div>
<div id="map" style= height: "500px" />
</div>
);
export default MappedRoutes;
我的示例回复：
export const routeMapped =
route:
routeId: "5a278bbfc9e77c0001cdf76d",
athleteId: "59d62dc0c9e77c0001ee60f5",
name: "Sathya new route",
city:
"105, Pasumpon Muthuramalinga Thevar Rd, RA Puram, Austin Nagar, Alwarpet, Chennai, Tamil Nadu 600028, India",
postalCode: "600028",
footPath: "FOLLOW",
routeType: "MAP",
routeCoordinates: [
lat: "13.02757",
lng: "80.25241000000001",
dis: 0,
ele: 11.04315
,
lat: "13.027460000000001",
lng: "80.25280000000001",
dis: 0.03,
ele: 11.61113
,
lat: "13.02724",
lng: "80.25385",
dis: 0.1,
ele: 13
,
lat: "13.027190000000001",
lng: "80.25404",
dis: 0.11,
ele: 13
,
lat: "13.02715",
lng: "80.25410000000001",
dis: 0.12,
ele: 13
,
lat: "13.02715",
lng: "80.25423",
dis: 0.13,
ele: 13
,
lat: "13.0271",
lng: "80.25593",
dis: 0.24,
ele: 10.75041
,
lat: "13.027090000000001",
lng: "80.25710000000001",
dis: 0.32,
ele: 10.75639
,
lat: "13.027070000000002",
lng: "80.25792000000001",
dis: 0.37,
ele: 11.9969
,
lat: "13.027080000000002",
lng: "80.25885000000001",
dis: 0.44,
ele: 11.54305
,
lat: "13.0271",
lng: "80.25989000000001",
dis: 0.51,
ele: 7.42083
,
lat: "13.02706",
lng: "80.26016000000001",
dis: 0.53,
ele: 7.69134
,
lat: "13.02697",
lng: "80.26058",
dis: 0.56,
ele: 8.78328
,
lat: "13.02683",
lng: "80.26158000000001",
dis: 0.62,
ele: 10.39793
,
lat: "13.02677",
lng: "80.26199000000001",
dis: 0.65,
ele: 10.99504
,
lat: "13.02663",
lng: "80.26337000000001",
dis: 0.75,
ele: 10.00481
,
lat: "13.02649",
lng: "80.26448",
dis: 0.82,
ele: 9.75728
,
lat: "13.02626",
lng: "80.26591",
dis: 0.92,
ele: 7.33569
,
lat: "13.025620000000002",
lng: "80.26547000000001",
dis: 0.97,
ele: 8.88202
,
lat: "13.025440000000001",
lng: "80.26535000000001",
dis: 0.99,
ele: 9.03837
,
lat: "13.02491",
lng: "80.26495000000001",
dis: 1.03,
ele: 8.40581
,
lat: "13.02424",
lng: "80.26446",
dis: 1.09,
ele: 9
,
lat: "13.024090000000001",
lng: "80.26441000000001",
dis: 1.1,
ele: 9
,
lat: "13.024030000000002",
lng: "80.26439",
dis: 1.1,
ele: 9
,
lat: "13.023560000000002",
lng: "80.26417000000001",
dis: 1.14,
ele: 8.94518
,
lat: "13.022110000000001",
lng: "80.26336",
dis: 1.25,
ele: 7.18578
,
lat: "13.02162",
lng: "80.26315000000001",
dis: 1.29,
ele: 7.92565
,
lat: "13.02148",
lng: "80.26303",
dis: 1.3,
ele: 7.95145
,
lat: "13.02078",
lng: "80.26280000000001",
dis: 1.35,
ele: 7.69057
,
lat: "13.020320000000002",
lng: "80.26270000000001",
dis: 1.39,
ele: 7.16353
,
lat: "13.02012",
lng: "80.26257000000001",
dis: 1.4,
ele: 7.14811
,
lat: "13.01997",
lng: "80.26243000000001",
dis: 1.42,
ele: 7.25697
,
lat: "13.01965",
lng: "80.2621",
dis: 1.45,
ele: 7.20241
,
lat: "13.01913",
lng: "80.26159000000001",
dis: 1.5,
ele: 7.5177
,
lat: "13.019020000000001",
lng: "80.26153000000001",
dis: 1.51,
ele: 7.6779
,
lat: "13.018910000000002",
lng: "80.26142",
dis: 1.52,
ele: 7.83809
,
lat: "13.0187",
lng: "80.26121",
dis: 1.54,
ele: 8.12365
,
lat: "13.0187",
lng: "80.26088",
dis: 1.56,
ele: 8.05447
,
lat: "13.01866",
lng: "80.25992000000001",
dis: 1.62,
ele: 8.20218
,
lat: "13.018630000000002",
lng: "80.25916000000001",
dis: 1.68,
ele: 8.21478
,
lat: "13.018640000000001",
lng: "80.25892",
dis: 1.69,
ele: 8.12121
,
lat: "13.01862",
lng: "80.25861",
dis: 1.71,
ele: 8.0189
,
lat: "13.01861",
lng: "80.25818000000001",
dis: 1.74,
ele: 7.84774
,
lat: "13.018650000000001",
lng: "80.25779",
dis: 1.77,
ele: 7.78325
,
lat: "13.018680000000002",
lng: "80.25767",
dis: 1.78,
ele: 7.82694
,
lat: "13.018730000000001",
lng: "80.25754",
dis: 1.79,
ele: 7.89976
,
lat: "13.01895",
lng: "80.25705",
dis: 1.82,
ele: 8.44032
,
lat: "13.019480000000001",
lng: "80.25598000000001",
dis: 1.9,
ele: 9.23848
,
lat: "13.019870000000001",
lng: "80.25523000000001",
dis: 1.96,
ele: 9.76589
,
lat: "13.02006",
lng: "80.25477000000001",
dis: 1.99,
ele: 9.48015
,
lat: "13.020320000000002",
lng: "80.25369",
dis: 2.07,
ele: 8.90729
,
lat: "13.020430000000001",
lng: "80.25333",
dis: 2.1,
ele: 8.383
,
lat: "13.02053",
lng: "80.25319",
dis: 2.11,
ele: 8.17911
,
lat: "13.020690000000002",
lng: "80.2531",
dis: 2.12,
ele: 8.04804
,
lat: "13.02091",
lng: "80.25304000000001",
dis: 2.14,
ele: 7.95772
,
lat: "13.02153",
lng: "80.25297",
dis: 2.18,
ele: 7.72059
,
lat: "13.021700000000001",
lng: "80.25295000000001",
dis: 2.19,
ele: 7.7359
,
lat: "13.02213",
lng: "80.25287",
dis: 2.22,
ele: 7.91471
,
lat: "13.024360000000001",
lng: "80.25274",
dis: 2.37,
ele: 10
,
lat: "13.02448",
lng: "80.25274",
dis: 2.38,
ele: 10
,
lat: "13.024630000000002",
lng: "80.25276000000001",
dis: 2.39,
ele: 10
,
lat: "13.025210000000001",
lng: "80.25299000000001",
dis: 2.44,
ele: 10.37474
,
lat: "13.02682",
lng: "80.25375000000001",
dis: 2.56,
ele: 12.67804
,
lat: "13.02715",
lng: "80.25383000000001",
dis: 2.58,
ele: 13
,
lat: "13.02724",
lng: "80.25385",
dis: 2.59,
ele: 13
,
lat: "13.027320000000001",
lng: "80.25341",
dis: 2.62,
ele: 12.49951
,
lat: "13.02753",
lng: "80.25256",
dis: 2.68,
ele: 11.2616
,
lat: "13.02757",
lng: "80.25241000000001",
dis: 2.69,
ele: 11.04315
],
distance: 2.69,
maxElevation: 0,
minElevation: 0,
startingLocation:
type: "ENTRY",
coordinates: ["13.02757", "80.25241000000001"]
,
endingLocation:
type: "EXIT",
coordinates: ["13.02757", "80.25241000000001"]
,
split: [
id: 1,
splitNo: 1,
splitDistance: 2.69,
splitMarkers:
markerType: "ENTRY",
markerId: "1",
startPosLat: "13.02757",
startPosLang: "80.25241000000001",
endPosLat: "13.02757",
endPosLang: "80.25241000000001"
],
laps: 1,
createdDatetime: null,
updatedDatetime: null
;
【问题讨论】：
不是从光标的坐标创建新路径，而是从原始路径的坐标创建它。drawFreeHand 函数有什么用？我看到的每个问题/答案都在绘制“徒手”折线（或多边形）。在我看来，您希望将鼠标位置“捕捉”到“路线折线”，然后将路线折线与另一条重叠线（从开始到捕捉点）。
@geocodezip drawFreeHand 是一个点击功能，当我触发时我只能高亮路线，我可以在任何我想要的地方高亮路线
那张图片在您的问题中。您是否表示红线来自drawFreehand 函数？您的问题表明这是“图标点击事件”。也许您可以更好地描述您的问题，很难从当前编写的问题中说出您的问题是什么以及您的用例/问题是什么。
@geocodezip 红线表示高亮的距离工具提示，drawFreehand 是一个点击功能，当我点击它时，我才能在默认折线路线上绘制黄线。
【参考方案1】：
这对你有帮助吗？
Drawing on the Map 有一些能力
https://developers.google.com/maps/documentation/javascript/overlays
也许这个动作会对你有所帮助
有一个板块Custom Overlays
https://developers.google.com/maps/documentation/javascript/customoverlays
哪个使用OverlayView
你可以在这里找到例子https://developers.google.com/maps/documentation/javascript/customoverlays
另外，还有第二种方法你可以试试Simple Polylineshttps://developers.google.com/maps/documentation/javascript/examples/polyline-simple
这是例子的一部分
<script>
// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap()
var map = new google.maps.Map(document.getElementById('map'),
zoom: 3,
center: lat: 0, lng: -180,
mapTypeId: 'terrain'
);
var flightPlanCoordinates = [
lat: 37.772, lng: -122.214,
lat: 21.291, lng: -157.821,
lat: -18.142, lng: 178.431,
lat: -27.467, lng: 153.027
];
var flightPath = new google.maps.Polyline(
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
);
flightPath.setMap(map);
</script>
【讨论】：
【参考方案2】： // You need to have a polyline,
var poly = new google.maps.Polyline(
map: _map,
strokeColor: '#000',
strokeWeight: 2,
strokeOpacity: 0.8,
clickable: false
);
// Then you have to add a listener, This will add points to polyline as you drag cursor
var move = google.maps.event.addListener(_map, 'mousemove', function (e)
poly.getPath().push(e.latLng);
);
// on mouseup add this,
google.maps.event.addListenerOnce(_map, 'mouseup', function (e)
google.maps.event.removeListener(move);
var path = poly.getPath();
poly.setMap(null);
var polygon = new google.maps.Polygon(
map: _map,
path: path,
strokeColor: '#000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#000',
fillOpacity: 0
);
);
/*
Note:
During dragging, you must temporarily make the map non draggable. This can be done
by setting draggable as false
*/
【讨论】：
以上是关于谷歌地图突出显示路径中拖动的路径的主要内容，如果未能解决你的问题，请参考以下文章
iPhone 应用程序：在 Google 地图中计算路径距离
如何在Android上使用谷歌地图或mapquest动态突出显示道路的一侧（或在旁边画一条线）