自定义符号动画不遵循多段线路径
Custom symbol animation not following polyline path
我正在使用谷歌地图API来显示飞行路径。我使用折线和自定义svg路径作为我的平面图标。
问题是svg符号显示在多段线之外,我想不出把它放在多段线上的方法。
由于它不是google.maps.Symbol,我不能使用anchor属性。
这是CODEPEN
这是我的代码:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 55.696242, lng: 12.593639},
zoom: 4
});
var lineSymbol = {
path: 'M 157.98695,184.38488 L 173.37483,168.20017 C 182.38616,159.18884 197.56012,162.31477 197.56012,162.31477 L 242.58958,168.47612 L 265.39575,146.16045 C 277.41087,134.35989 288.26269,152.4142 283.54247,158.63631 L 271.83305,172.24635 L 320.32641,181.22794 L 336.78707,162.03882 C 354.38063,141.01237 367.47041,159.95529 359.53185,171.11218 L 348.89521,184.56906 L 421.75804,194.07153 C 484.40828,133.78139 509.98537,108.77262 526.46939,123.63021 C 543.05967,138.5836 513.71315,168.38877 456.64135,227.17701 L 467.00204,302.24678 L 482.26714,289.52597 C 491.27847,282.01653 507.27901,294.06392 490.75822,309.72648 L 469.76089,329.52825 L 478.61969,378.66527 L 491.73923,368.58052 C 503.32523,359.35463 517.39476,371.55518 501.7322,388.29052 L 480.88803,409.28786 C 480.02981,409.93153 487.69305,452.38631 487.69305,452.38631 C 492.41327,473.19821 480.67347,480.80195 480.67347,480.80195 L 466.35838,493.27782 L 411.97962,339.67439 C 407.47395,326.15738 396.0546,311.47862 376.97351,313.22076 C 366.8894,314.29354 341.41552,331.49026 337.98263,335.56682 L 279.00579,392.27531 C 277.5039,393.34809 288.07915,465.99635 288.07915,465.99635 C 288.07915,468.14191 269.38054,492.66454 269.38054,492.66454 L 232.01433,426.14725 L 213.56128,434.7301 L 224.35108,417.93211 L 157.06733,379.9526 L 182.29502,361.49956 C 194.31014,364.28878 257.3034,371.36975 258.59073,370.72608 C 258.59073,370.72608 309.88762,319.85344 312.81633,316.77643 C 329.76623,298.96831 335.46935,292.31456 338.04402,283.51778 C 340.6208,274.71377 336.23117,261.81195 309.62838,245.4769 C 272.93937,222.94855 157.98695,184.38488 157.98695,184.38488 z',
scale: 0.025,
rotation: -30,
strokeColor: '#000',
fillColor: '#000',
fillOpacity: 1
};
var pathOptions = {
geodesic: true,
strokeColor: 'green',
strokeOpacity: 1.0,
strokeWeight: 2,
icons: [{
icon: lineSymbol,
offset: '100%'
}]
};
var path = new google.maps.Polyline(pathOptions);
var start_point = new google.maps.LatLng(55.696242, 12.593639);
var end_point = new google.maps.LatLng(35.701369, 139.664309);
path.getPath().setAt(0, start_point);
path.getPath().setAt(1, end_point);
path.setMap(map);
animateCircle(path);
}
function animateCircle(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;
var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 200);
}
编辑:我发现问题出在旋转上,尽管我不知道为什么。例如,如果将旋转更改为60,平面将位于多段线上,但不会指向多段线方向
我不知道为什么你认为anchor
不能与Symbol一起使用,文档中有描述:
符号对象规范
anchor | Type:Point |符号相对于标记或多段线的位置。符号路径的坐标分别由锚点的x和y坐标向左和向上平移。默认情况下,符号定位在(0,0)处。位置表示在与符号路径相同的坐标系中。
如果我设置了它和正确的旋转,符号会跟随多段线:
概念验证小提琴
代码片段:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 55.696242,
lng: 12.593639
},
zoom: 4
});
var lineSymbol = {
path: 'M 157.98695,184.38488 L 173.37483,168.20017 C 182.38616,159.18884 197.56012,162.31477 197.56012,162.31477 L 242.58958,168.47612 L 265.39575,146.16045 C 277.41087,134.35989 288.26269,152.4142 283.54247,158.63631 L 271.83305,172.24635 L 320.32641,181.22794 L 336.78707,162.03882 C 354.38063,141.01237 367.47041,159.95529 359.53185,171.11218 L 348.89521,184.56906 L 421.75804,194.07153 C 484.40828,133.78139 509.98537,108.77262 526.46939,123.63021 C 543.05967,138.5836 513.71315,168.38877 456.64135,227.17701 L 467.00204,302.24678 L 482.26714,289.52597 C 491.27847,282.01653 507.27901,294.06392 490.75822,309.72648 L 469.76089,329.52825 L 478.61969,378.66527 L 491.73923,368.58052 C 503.32523,359.35463 517.39476,371.55518 501.7322,388.29052 L 480.88803,409.28786 C 480.02981,409.93153 487.69305,452.38631 487.69305,452.38631 C 492.41327,473.19821 480.67347,480.80195 480.67347,480.80195 L 466.35838,493.27782 L 411.97962,339.67439 C 407.47395,326.15738 396.0546,311.47862 376.97351,313.22076 C 366.8894,314.29354 341.41552,331.49026 337.98263,335.56682 L 279.00579,392.27531 C 277.5039,393.34809 288.07915,465.99635 288.07915,465.99635 C 288.07915,468.14191 269.38054,492.66454 269.38054,492.66454 L 232.01433,426.14725 L 213.56128,434.7301 L 224.35108,417.93211 L 157.06733,379.9526 L 182.29502,361.49956 C 194.31014,364.28878 257.3034,371.36975 258.59073,370.72608 C 258.59073,370.72608 309.88762,319.85344 312.81633,316.77643 C 329.76623,298.96831 335.46935,292.31456 338.04402,283.51778 C 340.6208,274.71377 336.23117,261.81195 309.62838,245.4769 C 272.93937,222.94855 157.98695,184.38488 157.98695,184.38488 z',
scale: 0.025,
rotation: -45,
strokeColor: '#000',
fillColor: '#000',
fillOpacity: 1,
anchor: new google.maps.Point(500, 170)
};
var pathOptions = {
geodesic: true,
strokeColor: 'green',
strokeOpacity: 1.0,
strokeWeight: 2,
icons: [{
icon: lineSymbol,
offset: '100%'
}]
};
var path = new google.maps.Polyline(pathOptions);
var start_point = new google.maps.LatLng(55.696242, 12.593639);
var end_point = new google.maps.LatLng(35.701369, 139.664309);
path.getPath().setAt(0, start_point);
path.getPath().setAt(1, end_point);
/* var m = new google.maps.Marker({
map: map,
position: start_point,
icon: lineSymbol,
zIndex: -1
});
var p = new google.maps.Marker({
map: map,
position: start_point,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
},
zIndex: 1
});
*/
path.setMap(map);
animateCircle(path);
}
function animateCircle(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;
var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 200);
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
相关文章:
- 使用复选框绘制多段线谷歌地图API3,不'不起作用
- 如何将超链接添加到通过传单创建的传单多段线.Draw
- 如何在Maps API v3.中更改多段线的路径
- watchPosition与多段线组合
- 谷歌地图Javascript v3多段线点击事件
- 在谷歌地图上为每个“多边形”生成新的多段线;日期“;来自mysql的值
- 谷歌地图API多段线创建失败;未捕获类型错误:数字不是函数;
- 谷歌地图的多段线边界
- 谷歌地图API-在从ajax页面加载新数据之前清除标记、多段线
- GMapv3+同时显示所有标记+多段线
- 需要帮助,为谷歌地图多段线构建阵列
- 设置标记之间多段线的动画-Mapbox
- 如何将多段线添加到标记阵列中
- 谷歌地图V3删除多段线覆盖
- 传单-如何显示标记而不是多段线
- 知道多段线路径变量何时更改
- 有没有任何方法可以在传单上用恒定的宽度/笔划(以米为单位)而不是像素绘制路径(多段线)
- OSM创建可编辑地图来绘制多段线路径和标记
- 谷歌地图解码路径(多段线)-未压缩语法错误:意外的令牌非法
- 自定义符号动画不遵循多段线路径