Google Maps API自定义标记动画和路径方向
Google Maps API自定义标记动画和路径方向
提问于 2015-07-23 02:01:36
我正在尝试创建一个Google地图应用程序，它以直线显示从源到目的地的路线(如乌鸦飞翔)。我有一个通用的应用程序在工作。我可以输入一个起点和一个终点，它会慢慢地从起点到终点画一条线。另外，我有一个通用的标记，从开始到结束沿着直线路线移动。我想做的是用自定义绘制的标记替换通用标记。此外，我希望自定义标记的方向，使其符合路线。换句话说，如果自定义标记是一辆汽车，我希望汽车在沿着路线行驶时朝向正确的方向。
我看到了这个演示，但我不确定他们是如何做到的。http://www.morethanamap.com/demos/visualization/flights
有什么建议吗？
谢谢!
回答 1
Stack Overflow用户
发布于 2015-07-23 08:14:47
您需要为多段线设置IconSequence。IconSequence需要一个符号，例如-用于汽车的SVG：https://upload.wikimedia.org/wikipedia/commons/f/f6/Car.svg (©Pypaertv)
演示：
function initialize() {
var origin = new google.maps.LatLng(39.904211, 116.407394),
destination = new google.maps.LatLng(40.4167754, -3.703790),
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: origin,
zoom: 3
}),
line = new google.maps.Polyline({
geodesic: true,
path: [origin, origin],
icons: [{
icon: {
path: 'M 236.54427,9.8485 C 220.2445,9.8485 204.45277,15.405415 191.41289,25.550223 L 97.337229,97.995127 L -135.0706,131.12201 C -150.90459,133.65817 -161.13586,149.44963 -156.32358,165.14237 L -132.57022,244.60846 L -86.188678,244.60846 C -90.823109,289.62242 -60.00389,319.2235 -20.679452,319.2235 C 18.644986,319.2235 49.844083,285.73585 44.829779,244.60846 L 425.19586,244.60846 C 419.65783,289.49008 452.23789,319.2235 490.70508,319.2235 C 529.17227,319.2235 561.22444,285.70267 556.21433,244.60846 L 651.04018,244.60846 C 659.88863,244.60846 667.48002,236.98237 667.48,227.63005 L 667.48,137.76012 C 667.48,129.20037 661.30023,122.08284 653.22799,120.97335 L 491.76774,97.995127 L 427.82125,32.635149 C 413.84999,18.051989 394.74442,10.165524 374.56372,9.8485 L 236.54427,9.8485 z M 304.42883,37.42226 L 378.62679,37.42226 C 389.64854,37.42226 399.73373,43.261111 405.94316,52.613356 L 424.25825,80.825395 C 428.78955,88.722668 423.85522,96.409133 415.38198,97.803717 L 304.42883,97.803717 L 304.42883,37.42226 z M 224.60508,37.549916 L 283.42586,37.549916 L 283.42586,97.803717 L 132.59212,97.803717 L 200.10167,45.97523 C 207.08728,40.585799 215.91189,37.549914 224.60508,37.549916 z',
scale: .05,
fillColor: 'blue',
fillOpacity: 1,
rotation: 90,
anchor: new google.maps.Point(0, 200)
},
offset: '100%'
}]
}),
pct = 0,
timer = setInterval(function() {
pct += .002;
line.setPath([origin, google.maps.geometry.spherical.interpolate(origin, destination, pct)]);
line.setMap(map);
map.setCenter(line.getPath().getAt(1));
if (pct >= 1) clearInterval(timer)
}, 50);
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31570678
复制相关文章
相似问题
腾讯云开发者
