Google maps api 3 如何在直线的一侧显示曲线多段线？

这个问题与此相关，由@geocodezip回答

我遇到的一个问题是从北到南或从南到北划一条线。曲线现在像数字8或S一样弯曲。如何控制曲线显示在直线的一侧。有时，曲线在起点外展开，在终点处收缩。谢谢

这是我的密码。我有两条从北到南的多段线示例

var map;

function init() {
var Map = google.maps.Map,
    LatLng = google.maps.LatLng,
    LatLngBounds = google.maps.LatLngBounds,
    Marker = google.maps.Marker,
    Point = google.maps.Point;

var pos1 = new LatLng(29.703642, -95.152274);
var pos2 = new LatLng(29.702452, -95.152296);

var pos3 = new LatLng(29.703514, -95.151405);
var pos4 = new LatLng(29.702359, -95.152078);

var bounds = new LatLngBounds();
bounds.extend(pos1);
bounds.extend(pos2);
var mapOptions = {
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        draggableCursor: 'auto',
        panControl: true,
        scaleControl: true,
        smallMapControl: true,
        tilt: 0,
        zoom: 19,           
        zoomControl: true,
        rotateControl:true,
        zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }
    };
map = new Map(document.getElementById('map-canvas'), mapOptions);
map.fitBounds(bounds);

var markerP1 = new Marker({
    position: pos1,
    draggable: true,
    map: map
});
var markerP2 = new Marker({
    position: pos2,
    draggable: true,
    map: map
});

var markerP2 = new Marker({
    position: pos3,
    draggable: true,
    map: map
});
var markerP3 = new Marker({
    position: pos4,
    draggable: true,
    map: map
});

var curvedLine = new GmapsCubicBezier(pos1, pos2, 0.01, map);
var curvedLine = new GmapsCubicBezier(pos3, pos4, 0.01, map);

var line = new google.maps.Polyline({
  path: [pos1, pos2],
  strokeOpacity: 0,
  icons: [{
    icon: {
      path: 'M 0,-1 0,1',
      strokeOpacity: 1,
      scale: 4
    },
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

var line = new google.maps.Polyline({
    path: [pos3, pos4],
    strokeOpacity: 0,
    icons: [{
      icon: {
        path: 'M 0,-1 0,1',
        strokeOpacity: 1,
        scale: 4
      },
      offset: '0',
      repeat: '20px'
    }],
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', init);

var GmapsCubicBezier = function (latlong1, latlong4, resolution, map) {

var lineLength = google.maps.geometry.spherical.computeDistanceBetween(latlong1, latlong4);
var lineHeading = google.maps.geometry.spherical.computeHeading(latlong1, latlong4);

var positionA = google.maps.geometry.spherical.computeOffset(latlong1, lineLength / 3, lineHeading - 60);
var positionB = google.maps.geometry.spherical.computeOffset(latlong4, lineLength / 3, -lineHeading + 120);

var lat1 = latlong1.lat();
var long1 = latlong1.lng();

var lat2 = positionA.lat();
var long2 = positionA.lng();

var lat3 = positionB.lat();
var long3 = positionB.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,
        strokeOpacity: 0.0,
                    icons: [{
                        icon: {
                            path: 'M 0,-1 0,1',
                            strokeOpacity: 1,
                            scale: 4
                        },
                        offset: '0',
                        repeat: '20px'
                    }],
         strokeColor: 'grey'
     });

    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;
}
};

var映射；
函数init（）{
var Map=google.maps.Map，
LatLng=google.maps.LatLng，
LatLngBounds=google.maps.LatLngBounds，
Marker=google.maps.Marker，
Point=google.maps.Point；
var pos1=新板条（29.703642，-95.152274）；
var pos2=新车床（29.702452，-95.152296）；
var pos3=新车床（29.703514，-95.151405）；
var pos4=新车床（29.702359，-95.152078）；
var bounds=新的LatLngBounds（）；
扩展（pos1）；
扩展（pos2）；
变量映射选项={
disableDefaultUI:true，
mapTypeId:google.maps.mapTypeId.SATELLITE，
DragTableCursor:'自动'，
泛控制：对，
scaleControl：对，
smallMapControl：对，
倾斜：0，
缩放：19，
动物控制：对，
旋转控制：对，
ZoomControl选项：{style:google.maps.ZoomControl.SMALL}
};
map=newmap（document.getElementById（'map-canvas'），mapOptions）；
映射边界（bounds）；
var markerP1=新标记({
位置：pos1，
真的，
地图：地图
});
var markerP2=新标记({
位置：pos2，
真的，
地图：地图
});
var markerP2=新标记({
位置：pos3，
真的，
地图：地图
});
var markerP3=新标记({
位置：pos4，
真的，
地图：地图
});
var curvedLine=新的GMapCubicBezier（位置1，位置2，0.01，地图）；
var curvedLine=新的GMapCubicBezier（位置3，位置4，0.01，地图）；
var line=新的google.maps.Polyline({
路径：[pos1，pos2]，
笔划不透明度：0，
图标：[{
图标：{
路径：“M 0，-1 0,1”，
频闪不透明度：1，
比例：4
},
偏移量：“0”，
重复：“20px”
}],
地图：地图
});
var line=新的google.maps.Polyline({
路径：[位置3，位置4]，
笔划不透明度：0，
图标：[{
图标：{
路径：“M 0，-1 0,1”，
频闪不透明度：1，
比例：4
},
偏移量：“0”，
重复：“20px”
}],
地图：地图
});
}
google.maps.event.addDomListener（窗口'load'，init）；
var GmapsCubicBezier=函数（latlong1，latlong4，分辨率，映射）{
var lineLength=google.maps.geometry.sphereal.ComputedDistanceBeween（latlong1，latlong4）；
var lineHeading=google.maps.geometry.spheremic.computeHeading（latlong1，latlong4）；
var positionA=google.maps.geometry.spheremic.computeOffset（latlong1，lineLength/3，lineHeading-60）；
var positionB=google.maps.geometry.spheremic.computeOffset（latlong4，lineLength/3，-lineHeading+120）；
var lat1=latlong1.lat（）；
var long1=latlong1.lng（）；
var lat2=位置a.lat（）；
var long2=位置a.lng（）；
var lat3=位置b.lat（）；
var long3=位置B.lng（）；
var lat4=latlong4.lat（）；
var long4=latlong4.lng（）；
var点=[]；
对于（it=0；it绘制您正在寻找的贝塞尔曲线的常规程序是：

function drawDashedCurve(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);
}

html，
身体，
#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}

好的，当你进入世界范围时，线会失去控制（我将点偏移量增加到1000000，5000000:，这与这里发生的情况类似：你知道为什么会发生这种情况以及如何解决它吗？这是一个新的/不同的问题。如果你问（并提供答案），这可能更容易帮助。看，这看起来像是一个国际日期线问题。你的意思是坐标应该归零在格林威治和世界的另一边？这取决于你想做什么。