Javascript 使用谷歌地图多段线绘制贝塞尔曲线

我试图通过在多段线中使用SVG路径在google maps中绘制贝塞尔曲线。起初我用了一个类似于的标记，它给出了我想要的结果。但是，由于无法将地图拖动到标记下，因此我无法使用此方法

所以我切换到多段线而不是标记。现在，当我缩小时，我得到了同样好的结果，但当我放大时，曲线变为“裁剪”

代码如下：

function initialize() {
    var mapOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var coord1 = new google.maps.LatLng(49.165876, -123.152446);
    var coord2 = new google.maps.LatLng(25.786328, -80.193694);
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(coord1);
    bounds.extend(coord2);
    map.fitBounds(bounds);

    pLineOpt = {
        path: [coord1, coord2],
        strokeWeight: 4,
        strokeOpacity: 0,
        map: map,
    }

    pLine = new google.maps.Polyline(pLineOpt);

    var markers = [
        new google.maps.Marker({
            position: coord1,
            map: map
        }),
        new google.maps.Marker({
            position: coord2,
            map: map
        })
    ];

    google.maps.event.addListener(map, 'zoom_changed', function () {
        //points
        var p1 = map.getProjection().fromLatLngToPoint(coord1);
        var p2 = map.getProjection().fromLatLngToPoint(coord2);
        //distance between points
        var d = new google.maps.Point(p2.x - p1.x, p2.y - p1.y);
        var lengthSqr = d.x * d.x + d.y * d.y;
        //middle point
        var m = new google.maps.Point(d.x / 2, d.y / 2);
        //slope of perpendicular line
        var perpK = -d.x / d.y;
        //distance to control point
        var ratioDistanceControlLengthSqr = 9;
        var controlDSqr = lengthSqr / ratioDistanceControlLengthSqr;
        var p3dX = Math.sqrt(controlDSqr / (Math.pow(perpK, 2) + 1));
        var p3dY = perpK * p3dX;
        //control point
        var p3 = new google.maps.Point(m.x - p3dX, m.y - p3dY);
        //curve path
        var path = "M 0 0 q " + p3.x + " " + p3.y + " " + d.x + " " + d.y;
        //calc scale                
        var zoom = map.getZoom();
        var scale = 1 / (Math.pow(2, -zoom));

        var icon = {
            path: path,
            scale: scale,
            strokeWeight: 3,
            strokeOpacity: 1,
        };

        pLineOpt.icons = [{
            fixedRotation: true,
            icon: icon,
            offset: '0'
        }];
        pLine.setOptions(pLineOpt);
    });
}

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

我对代码做了一个JSFIDLE：

有人知道为什么缩放时会剪切多段线吗？有没有办法解决这个问题

---

谢谢

您需要修复多段线选项：

pLineOpt = {
    path: [coord1, coord2],
    geodesic: true,
    strokeColor: '#000',
    strokeOpacity: 1.0,
    strokeWeight: 4
}

请尝试以下代码段：可能这就是您想要的…：）

函数初始化（）{
变量映射选项={
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
var coord1=new google.maps.LatLng（49.165876，-123.152446）；
var coord2=新的google.maps.LatLng（25.786328，-80.193694）；
var bounds=new google.maps.LatLngBounds（）；
扩展（coord1）；
扩展（coord2）；
映射边界（bounds）；
pLineOpt={
路径：[coord1，coord2]，
测地线：正确，
strokeColor:“#000”，
笔划不透明度：1.0，
冲程重量：4
}
pLine=新的google.maps.Polyline（pLineOpt）；
变量标记=[
新的google.maps.Marker({
职位：coord1，
地图：地图
}),
新的google.maps.Marker({
职位：coord2，
地图：地图
})];
pLine.setMap（map）；
google.maps.event.addListener（映射'zoom_changed'，函数（）{
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，主体，#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}
来自此相关问题：



代码段：


var映射；
var origLoc=newgoogle.maps.LatLng（45，-85）；
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（33.811192，-115.032444），
缩放：3
};
map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
var coord1=new google.maps.LatLng（49.165876，-123.152446）；
var coord2=新的google.maps.LatLng（25.786328，-80.193694）；
var marker1=新的google.maps.Marker({
职位：coord1，
标题：“标记1”，
地图：地图
});
var marker2=新的google.maps.Marker({
职位：coord2，
标题：“标记2”，
地图：地图
});
var curvedLine=新的GMapCubicBezier(
49.165876, -123.152446,
33.811192, -115.032444,
30.820807, -123.749998,
25.786328, -80.193694,
0.01，地图）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
var GmapsCubicBezier=函数（lat1、long1、lat2、long2、lat3、long3、lat4、long4、分辨率、映射）{
var点=[]；
对于（it=0；it），您的多段线正在被裁剪。这种情况发生了很多次，不确定为什么会发生在您的特定情况下，但可能是多段线的API平铺渲染中存在错误。对于奇怪的问题，我总是建议您首先尝试API的发行版和冻结版。
var curvedLine = new GmapsCubicBezier(
      49.165876, -123.152446, 
      33.811192,-115.032444, 
      30.820807,-123.749998, 
      25.786328, -80.193694, 
      0.01, map);