尝试将Google地图的折线图标设置在线条中心时,我陷入困境。
我正在使用自定义汽车图标,但该图标未在我在地图上绘制的折线上正确设置。请查看屏幕截图:
如果我通过使用路径(路径:google.maps.SymbolPath.FORWARD_CLOSED_ARROW)使用Google API提供的图标,它将显示在该行的中心。
如何在行的中间设置汽车图标?请检查示例代码here。
对于汽车图标,我正在使用以下代码,是否需要在此处进行任何修改?
var iconsetngs = {
path: 'M25.395,0H17.636c-3.117,0-5.643,3.467-5.643,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759' +
'c3.116,0,5.644-2.527,5.644-5.644V6.584C35.037,3.467,32.511,0,29.395,0z M34.05,14.188v11.665l-2.729,0.351v-4.806L34.05,14.188z' +
'M32.618,10.773c-1.016,3.9-2.219,8.51-2.219,8.51H16.631l-2.222-8.51C14.41,10.773,23.293,7.755,32.618,10.773z M15.741,21.713' +
'v4.492l-2.73-0.349V14.502L15.741,21.713z M13.011,37.938V27.579l2.73,0.343v8.196L13.011,37.938z M14.568,40.882l2.218-3.336' +
'h13.771l2.219,3.336H14.568z M31.321,35.805v-7.872l2.729-0.355v10.048L31.321,35.805z',
fillColor: 'blue',
fillOpacity: 1,
scale: 0.4,
strokeColor: 'gray',
strokeWeight: 0.4,
offset: '50%'
};
var polyOptions = new google.maps.Polyline({
path: path,
strokeColor: '#0c0bbb',
strokeWeight: 1.5,
map: this.map,
icons: [{
icon: iconsetngs,
repeat: '70px',
}]
});
polyOptions.setMap(this.map);
答案 0 :(得分:2)
您将需要修改图标的anchor
点。在我添加的anchor: new google.maps.Point(23, 0)
fork of your example中,Google Maps文档的Complex icons下有一些可用的额外属性的详细信息。