谷歌地图API javascript曲线和箭头端

var映射；
var曲率=0.5；//弧线有多弯曲
函数init（）{
var Map=google.maps.Map，
LatLng=google.maps.LatLng，
LatLngBounds=google.maps.LatLngBounds，
Marker=google.maps.Marker，
Point=google.maps.Point；
//这是点的初始位置
//（可以在地图加载后拖动标记）
var pos1=新车床（23.634501，-102.552783）；
var pos2=新车床（17.987557，-92.929147）；
var bounds=新的LatLngBounds（）；
扩展（pos1）；
扩展（pos2）；
map=新映射（document.getElementById（'map-canvas'）{
center:bounds.getCenter（），
缩放：12
});
映射边界（bounds）；
var markerP1=新标记({
位置：pos1，
标签：“1”，
真的，
地图：地图
});
var markerP2=新标记({
位置：pos2，
标签：“2”，
真的，
地图：地图
});
var曲线标记器；
var-endarrow标记；
函数updateCurveMarker（）{
var pos1=markerP1.getPosition（），//latlng
pos2=markerP2.getPosition（），
projection=map.getProjection（），
p1=投影。从LATLNGTOPOINT（位置1），//xy
p2=从LatlngTopoint（位置2）的投影；
//计算弧长。
//为了简化数学，以下几点
//都与p1有关：
var e=新点（p2.x-p1.x，p2.y-p1.y），//端点（p2相对于p1）
m=新点（e.x/2，e.y/2），//中点
o=新点（e.y，-e.x），//正交
c=新点（//曲线控制点
m、 x+曲率*o.x，
m、 y+曲率*o.y）；
var pathDef='M 0,0'+
"q"+c.x+","+c.y+","+e.x+","+e.y,；
var zoom=map.getZoom（），
比例=1/（数学功率（2，-缩放））；
变量符号={
路径：pathDef，
比例：比例，
冲程重量：2，
fillColor:“无”
};
如果（！曲线标记器）{
曲线标记器=新标记器({
位置：pos1，
可点击：false，
图标：符号，
zIndex:0，//在其他标记后面
地图：地图
});
}否则{
curveMarker.setOptions({
位置：pos1，
图标：符号，
});
}
var heading=google.maps.geometry.spheremic.computeHeading（pos1，pos2）；
变量方向图标={
路径：google.maps.SymbolPath.FORWARD\u OPEN\u箭头，
比例：5，
轮调：航向
};
如果（！endArrowMarker）{
endArrowMarker=新标记({
位置：pos2，
可点击：false，
图标：方向图标，
地图：地图
});
}否则{
endArrowMarker.setIcon（方向图标）；
}
}
google.maps.event.addListener（映射，'projection\u changed'，updateCurveMarker）；
google.maps.event.addListener（map'zoom_changed'，updateCurveMarker）；
google.maps.event.addListener（markerP1，'position_changed'，updateCurveMarker）；
google.maps.event.addListener（markerP2，'position_changed'，updateCurveMarker）；
}
google.maps.event.addDomListener（窗口'load'，init）
html，
身体，
#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}
您可以使用弯曲多段线，使用nicoabie对StackOverflow问题的回答中的原始Belzier曲线代码：

在末尾添加图标：

icons: [{
  icon: {
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
    scale: 5,
  },
  offset: '100%'
}],

它将自动调整以指向正确的方向（）



代码片段：


var映射；
var曲率=0.5；//弧线有多弯曲
函数init（）{
var Map=google.maps.Map，
LatLng=google.maps.LatLng，
LatLngBounds=google.maps.LatLngBounds，
Marker=google.maps.Marker，
Point=google.maps.Point；
var pos1=新车床（23.634501，-102.552783）；
var pos2=新车床（17.987557，-92.929147）；
var bounds=新的LatLngBounds（）；
扩展（pos1）；
扩展（pos2）；
map=新映射（document.getElementById（'map-canvas'）{
center:bounds.getCenter（），
缩放：12
});
映射边界（bounds）；
var markerP1=新标记({
位置：pos1，
标签：“1”，
可拖动：错误，
地图：地图
});
var markerP2=新标记({
位置：pos2，
标签：“2”，
可拖动：错误，
地图：地图
});
绘制曲线（pos2、pos1、map）；
drawCurve（新google.maps.LatLng（19.4326077，-99.133208），新google.maps.LatLng（19.173773，-96.1342240），map）；
}
google.maps.event.addDomListener（窗口'load'，init）；
函数绘制曲线（P1、P2、map）{
var lineLength=google.maps.geometry.spheremic.ComputedDistanceBeween（P1，P2）；
var lineHeading=google.maps.geometry.spheremic.computeHeading（P1，P2）；
变量lineHeading1、lineHeading2；
如果（行标题<0）{
线头1=线头+45；
线头2=线头+135；
}否则{
lineHeading1=lineHeading+-45；
线头2=线头+-135；
}
var pA=google.maps.geometry.sphereal.computeOffset（P1，lineLength/2.2，lineHeading1）；
var pB=google.maps.geometry.sphereal.computeOffset（P2，lineLength/2.2，lineHeading2）；
var curvedLine=新的GMapCubicBezier（P1，pA，pB，P2，0.01，map）；
}
//nicoabie对StackOverflow问题的回答中的原始Belzier曲线代码：
// http://stackoverflow.com/questions/5347984/letting-users-draw-curved-lines-on-a-google-map
var GmapsCubicBezier=函数（latlong1、latlong2、latlong3、latlong4、分辨率、映射）{
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点=[]；
for（it=0；it）