如何将自定义svg图标置于道路中心

时间:2014-06-29 10:56:04

标签: google-maps-api-3

我只是想问我有svg图标它不会居中在道路一侧的路上不像预定的路径(箭头)谷歌地图它显示在地图的中心。我可以使它在路上居中,就像谷歌地图预定义的路径一样。

这是我的jsfiddle

example

var iconcar = {
   path: "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z",

   scale: .8
    }
    var carPolyline = new google.maps.Polyline({
        map: map,
        geodesic : true,
        strokeColor : '#FF0000',
        strokeOpacity : 1.0,
        strokeWeight : 2,
        icons: [{
          icon: iconcar,
            scale: .8,   
          offset: '100%'
        }],
    });
    var carPath = new google.maps.MVCArray();
    for ( var i = 0; i < path_start.length; i++) {
        if(i === 0) {
            carPath.push(path_start[i]);
            carPolyline.setPath(carPath);
        } else {
            setTimeout((function(latLng) {
                return function() {

                    carPath.push(latLng);
                    map.setCenter(latLng);
                };
            })(path_start[i]), 100 * i);
        }
    }

1 个答案:

答案 0 :(得分:3)

您可以设置不同的锚点,例如:

var iconcar = {
       anchor: new google.maps.Point(10, 50),
       path:
   ...

updated fiddle

这使它成为“汽车”的前中心:

      anchor: new google.maps.Point(10, 0),

anchored at the front center of the car