个人中心
gpt4 book ai didi

javascript - 如何用曲线连接谷歌地图中的点？

转载 作者：行者123 更新时间：2023-11-28 18:44:39 26 4
gpt4 key购买 nike

任何人都可以帮我用圆弧或抛物线或谷歌地图中的任何曲线连接指定点吗？目前它是用直线连接的。我尝试过使用其他堆栈溢出问题，但这些代码只连接两个点，将来我可能有多个标记，所以我需要一些可以反复重复使用的东西...请参阅下面的代码.. .

<!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>

最佳答案

一种选择是使用此相关问题中的代码:How to display curved polyline on one side of a straight line? (贝塞尔曲线)。

proof of concept fiddle

screenshot of resulting map

代码片段:

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>

关于javascript - 如何用曲线连接谷歌地图中的点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35572626/

26 4 0
文章推荐： python - Pandas 能否在没有迭代的情况下找到连接任何一对**点**并且不与任何给定的**线**相交的所有线？
文章推荐： python - 执行 full_clean 的 Model.objects.create 等价物？
文章推荐： python - 使用 Python Pandas 将参数传递给 SQL CTE
文章推荐： python - SWIG:将 2d numpy 数组传递给 C 函数 f(double a[])
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com