Google maps 如何在Google Maps JS API中创建虚线曲线多段线?

Google maps 如何在Google Maps JS API中创建虚线曲线多段线?,google-maps,google-maps-api-3,google-maps-markers,Google Maps,Google Maps Api 3,Google Maps Markers,我已经创建了一条虚线多段线和一条曲线多段线,我可以使虚线成为曲线,还是使曲线成为虚线 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映射;
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,
真的,
地图:地图
});
var markerP2=新标记({
位置:pos2,
真的,
地图:地图
});
var曲线标记器;
函数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,
比例:比例,
冲程重量:1,
fillColor:“无”
};
//使用SVG路径表示法定义符号,不透明度为1。
变量lineSymbol={
路径:“m0,-20,0.5”,
频闪不透明度:1,
冲程重量:2,
比例:4
};
//创建多段线,在“图标”属性中传递符号。
//将该线的不透明度设置为0。
//以20像素的间隔重复该符号以创建虚线效果。
var line=新的google.maps.Polyline({
路径:[pos1,pos2],
笔划不透明度:0,
strokeColor:'绿色',
图标:[{
图标:lineSymbol,
偏移量:“0”,
重复:“4%”
}],
地图:地图
});
如果(!曲线标记器){
曲线标记器=新标记器({
位置:pos1,
可点击:false,
图标:符号,
zIndex:0,//在其他标记后面
地图:地图
});
}否则{
curveMarker.setOptions({
位置:pos1,
图标:符号,
});
}
}
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);

您只需要曲线多段线的坐标,您可以使用(或)中引用的,然后使用SVG图标作为样式

代码片段:

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,
地图:地图
});
var markerP2=新标记({
位置:pos2,
地图:地图
});
var曲线标记器;
函数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,
比例:比例,
冲程重量:1,
fillColor:“无”
};
//使用SVG路径表示法定义符号,不透明度为1。
变量lineSymbol={
路径:“m0,-20,0.5”,
频闪不透明度:1,
冲程重量:2,
比例:4
};
//创建多段线,在“图标”属性中传递符号。
//将该线的不透明度设置为0。
//以20像素的间隔重复该符号以创建虚线效果。
变量