如何将Google Map中的点与曲线连接起来？

Question

谁能帮助我将指定点与我的Google地图中的圆弧或抛物线或任何曲线连接？ 当前与一条直线相连。 我尝试使用另一个被问到的堆栈溢出问题，但那些代码仅连接两点，将来我可能会有多个标记，因此我需要可以重复使用的内容...请参阅下面的代码。。

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>

<script>
var x=new google.maps.LatLng(14.560774500000008,121.02631410000006);

var rcbc=new google.maps.LatLng(14.560648, 121.016781);
var powerplant=new google.maps.LatLng(14.565066, 121.036184);

var trafalgar=new google.maps.LatLng(14.560774500000008,121.02631410000006);
var mapua=new google.maps.LatLng(14.562883, 121.022039);

function initialize()
{
var mapProp = {
center:x,
zoom:15,
mapTypeId:google.maps.MapTypeId.ROADMAP
};  

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myTrip=[trafalgar,rcbc];
var myTrip2=[rcbc,powerplant];

var flightPath2=new google.maps.Polyline({
path:myTrip2,
strokeColor:"##35495e",
strokeOpacity:0.8,
strokeWeight:3
});

var flightPath=new google.maps.Polyline({
path:myTrip,
strokeColor:"##35495e",
strokeOpacity:0.8,
strokeWeight:3
});

var marker=new google.maps.Marker({
position:x,
});

var marker2=new google.maps.Marker({
position:london,
});

var marker3=new google.maps.Marker({
position:rcbc,
});

var marker4=new google.maps.Marker({
position:powerplant,
});

marker4.setMap(map);
marker3.setMap(map);
marker2.setMap(map);
marker.setMap(map);
flightPath.setMap(map);
flightPath2.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:1000px;height:680px;"></div>
</body>
</html>

Answer 1

一种选择是使用来自相关问题的代码：如何在直线的一侧显示弯曲的折线？ （贝塞尔曲线）。

概念证明

代码段：

 function drawCurve(P1, P2, map) { var lineLength = google.maps.geometry.spherical.computeDistanceBetween(P1, P2); var lineHeading = google.maps.geometry.spherical.computeHeading(P1, P2); if (lineHeading < 0) { var lineHeading1 = lineHeading + 45; var lineHeading2 = lineHeading + 135; } else { var lineHeading1 = lineHeading + -45; var lineHeading2 = lineHeading + -135; } var pA = google.maps.geometry.spherical.computeOffset(P1, lineLength / 2.2, lineHeading1); var pB = google.maps.geometry.spherical.computeOffset(P2, lineLength / 2.2, lineHeading2); var curvedLine = new GmapsCubicBezier(P1, pA, pB, P2, 0.01, map); } var x = new google.maps.LatLng(14.560774500000008, 121.02631410000006); var london = new google.maps.LatLng(51.5073509, -0.12775829999998223); var rcbc = new google.maps.LatLng(14.560648, 121.016781); var powerplant = new google.maps.LatLng(14.565066, 121.036184); var trafalgar = new google.maps.LatLng(14.560774500000008, 121.02631410000006); var mapua = new google.maps.LatLng(14.562883, 121.022039); function initialize() { var mapProp = { center: x, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); var myTrip = [trafalgar, rcbc]; var myTrip2 = [rcbc, powerplant]; drawCurve(trafalgar, rcbc, map); drawCurve(rcbc, powerplant, map); var marker = new google.maps.Marker({ position: x, }); var marker2 = new google.maps.Marker({ position: london, }); var marker3 = new google.maps.Marker({ position: rcbc, }); var marker4 = new google.maps.Marker({ position: powerplant, }); marker4.setMap(map); marker3.setMap(map); marker2.setMap(map); marker.setMap(map); flightPath.setMap(map); flightPath2.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); // original Belzier Curve code from nicoabie's answer to this question on StackOverflow: // https://stackoverflow.com/questions/5347984/letting-users-draw-curved-lines-on-a-google-map var GmapsCubicBezier = function(latlong1, latlong2, latlong3, latlong4, resolution, map) { var lat1 = latlong1.lat(); var long1 = latlong1.lng(); var lat2 = latlong2.lat(); var long2 = latlong2.lng(); var lat3 = latlong3.lat(); var long3 = latlong3.lng(); var lat4 = latlong4.lat(); var long4 = latlong4.lng(); var points = []; for (it = 0; it <= 1; it += resolution) { points.push(this.getBezier({ x: lat1, y: long1 }, { x: lat2, y: long2 }, { x: lat3, y: long3 }, { x: lat4, y: long4 }, it)); } var path = []; for (var i = 0; i < points.length - 1; i++) { path.push(new google.maps.LatLng(points[i].x, points[i].y)); path.push(new google.maps.LatLng(points[i + 1].x, points[i + 1].y, false)); } var Line = new google.maps.Polyline({ path: path, geodesic: true, strokeColor: "##35495e", strokeOpacity: 0.8, strokeWeight: 3 /* dashed line: icons: [{ icon: { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 4 }, offset: '0', repeat: '20px' }], */ }); Line.setMap(map); return Line; }; GmapsCubicBezier.prototype = { B1: function(t) { return t * t * t; }, B2: function(t) { return 3 * t * t * (1 - t); }, B3: function(t) { return 3 * t * (1 - t) * (1 - t); }, B4: function(t) { return (1 - t) * (1 - t) * (1 - t); }, getBezier: function(C1, C2, C3, C4, percent) { var pos = {}; pos.x = C1.x * this.B1(percent) + C2.x * this.B2(percent) + C3.x * this.B3(percent) + C4.x * this.B4(percent); pos.y = C1.y * this.B1(percent) + C2.y * this.B2(percent) + C3.y * this.B3(percent) + C4.y * this.B4(percent); return pos; } };

 html, body, #googleMap { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> <div id="googleMap"></div>

Answer 2

加载Google Maps JS时，请指定几何库：

<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

这意味着您可以在创建折线时添加geodesic属性，例如

var flightPath2=new google.maps.Polyline({
    path:myTrip2,
    geodesic: true,
    strokeColor:"##35495e",
    strokeOpacity:0.8,
    strokeWeight:3
});

“如果为true，则多边形的边缘将被解释为测地线，并且将遵循地球的曲率。如果为false，则多边形的边缘将在屏幕空间中呈现为直线。”

请参阅Google的示例和文档：

如何将Google Map中的点与曲线连接起来？

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-02-23 17:24:03

解决方案2
0 2016-02-23 09:15:03

如何将Google Map中的点与曲线连接起来？

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-02-23 17:24:03

解决方案2 0 2016-02-23 09:15:03

解决方案1
3 已采纳 2016-02-23 17:24:03

解决方案2
0 2016-02-23 09:15:03