Fatal编程技术网
  • google-maps-api-3/
  • Google maps api 3 添加动画PNG。在谷歌地图API中创建多段线

Google maps api 3 添加动画PNG。在谷歌地图API中创建多段线

google-maps-api-3

Google maps api 3 添加动画PNG。在谷歌地图API中创建多段线,google-maps-api-3,Google Maps Api 3,我正在尝试在多段线上设置图标动画，如本例所示： 它可以工作，但我想添加我自己的PNG作为正在设置动画的图标。这就是我所尝试的： var line = new google.maps.Polyline({ path: [{ lat: 25.774266, lng: -80.193659 }, { lat: 25.83333, lng: 25.83333 - 77.8999964 }], icons: [{

我正在尝试在多段线上设置图标动画，如本例所示：

它可以工作，但我想添加我自己的PNG作为正在设置动画的图标。这就是我所尝试的：

        var line = new google.maps.Polyline({
            path: [{ lat: 25.774266, lng: -80.193659 }, { lat: 25.83333, lng: 25.83333 - 77.8999964 }],
            icons: [{
                icon: CruiseShip //This is my .PNG file
            }],
            strokeColor: '#ffffff',
            strokeWeight: 1,
            map: map
        });

        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);
            }, 20);
        }
使用示例中的lineSymbol对象确实有效。如何将.PNG文件添加到多段线而不是线条符号？找不到有关此的任何文档。

尝试设置图标动画的方式仅适用于SVG符号

为Google Maps Javascript API v2编写了一个扩展名，该扩展名包含.GetPointAtDistance方法，该方法可用于沿多段线更新法线图标的位置，现已被弃用并关闭

google.maps.geometry.spherical库中有一种插值方法，可以在两个点之间进行插值，但对于大比例特征而言，该方法不太精确

代码段：

//此示例创建一条2像素宽的红色多段线，显示 //加利福尼亚州奥克兰和布里斯班之间的第一次跨太平洋航班， //澳大利亚，由查尔斯·金斯福德·史密斯制作。 函数初始化映射{ 更新plylineprototype； var map=new google.maps.Mapdocument.getElementById'map'{ 缩放：3， 中心：{ 纬度：0， 液化天然气：-180 }, mapTypeId:'地形' }; var line=新的google.maps.Polyline{ 路径：[{ 纬度：25.774266， 液化天然气：-80.193659 }, { 拉脱维亚：25.83333， 液化天然气：25.83333-77.8999964 }, { 纬度：28.411413， 液化天然气：-16.5449611 }], strokeColor:'ffffffff'， 冲程重量：1， 地图：地图 }; var marker=new google.maps.marker{ 图标：{ 网址：http://earth.google.com/images/kml-icons/track-directional/track-12.png, 主持人：新google.maps.Point12,12， scaledSize:new google.maps.Size24， }, 位置：line.getPath.getAt0， 地图：地图 } var bounds=new google.maps.LatLngBounds； 对于变量i=0；i