環境： MacOSX、RoR 3.2.6、gmaps4rails 1.5.5、Google Maps API V3
要望： Googleマップのシンボルメカニズムをサポートできるgmaps4railsを使用して、地図上にポリラインを表示すると便利です。
参照ドキュメント：
問題の現在の状況現在、バニラ属性（strokeColor、strokeWeight、strokeOpacity）を使用して、gmaps4railsを使用してポリラインを描画することができます。この問題は、ライン上にシンボルを作成するためのメタデータを追加しようとしたときに発生します。
Googleマップの作業コード
ポリライン上のシンボルのドキュメントから、1-n個のアイコン要素を持つアイコン配列を作成します。作業サンプルの例は次のとおりです。
dashed = new google.maps.Polyline({
path: [
new google.maps.LatLng(40, -80),
new google.maps.LatLng(-50, 80)
],
geodesic: true,
strokeOpacity: 0.0,
strokeColor: 'yellow',
icons: [{
icon: {
path: 'M 0,-2 0,2',
strokeColor: 'red',
strokeOpacity: 1.0,
},
repeat: '24px'
}],
map: map,
});
破線は作成されるポリラインであり、アイコン配列はJavascriptのSVGを介してインラインで定義されています。
Chrome検査ウィンドウ内でオブジェクトを検査し、マップが完成する前にブレークポイントを設定すると、次のようにフォーマットされたオブジェクトが取得されます（汎用アクセサーとオブジェクト参照が削除されました）。
dashed
geodesic: true
icons: Array[1]
0: Object
icon: Object
path: "M 0,-2 0,2"
strokeColor: "red"
strokeOpacity: 1
repeat: "24px"
length: 1
latLngs: Nf
map: sh
strokeColor: "yellow"
strokeOpacity: 0
これはすべてうまく機能します。ただし、これは静的htmlで作成され、onLoad（）関数に適用されるJavaScriptです。
gmaps4railsを使用して複製しようとしています
複数のポリゴン、シンボル、およびポリラインをロードする汎用マップコントローラーがあります。前に述べたように、一般的なポリラインを取得することは問題ありません。これは、基本的な破線の記号でポリラインを生成するために使用しようとしているコントローラーのRubyコードです。
# Array to push created lines into for pushing through JSON
polyline_array = []
# Array to push the icons created into for use by the gmaps4rails.base.js.coffee
icons_array = []
# SVG path representation of symbol
symbol = {:path => 'M 0,-2 0,2', :strokeColor => 'red', :strokeOpacity => 1.0}
# Create actual instance of the icon element to push to the icons array
tmpIcon = {:icon => symbol, :repeat => '24px'}
# Push to the icons array
icons_array.push(tmpIcon)
@lines.each do |line|
tmpLine = []
line.points.each do |point|
# Only populate the icon and line style for the first point in the
# polylines point array
if point == line.points.first
tmpPoint = {:clickable => true, :linename => line.name,
:icons => icons_array, :strokeOpacity => 0.0, :strokeColor => 'yellow'}
else
tmpPoint = {}
end
tmpPoint.merge ! :lat => point.latitude, :lng => point.longitude
tmpLine.push(tmpPoint)
end
polyline_array.push(tmpLine)
end
@polyline_json = polyline_array.to_json
gmaps4rails.googlemaps.js.coffeeスクリプトに変更を加えて、アイコンをポリライン作成関数に挿入しました。
for element in polyline
#if we have a coded array
if element.coded_array?
decoded_array = new google.maps.geometry.encoding.decodePath(element.coded_array)
#loop through every point in the array
for point in decoded_array
polyline_coordinates.push(point)
#or we have an array of latlng
else
#by convention, a single polyline could be customized in the first array or it uses default values
if element == polyline[0]
strokeColor = element.strokeColor || @polylines_conf.strokeColor
strokeOpacity = 0
# Set explicit strokeOpacity to 0 to try and match example that works
# Would do something sexy later
#strokeOpacity = element.strokeOpacity || @polylines_conf.strokeOpacity
# Comment out strokeWeight to make it match object sent in working example
#strokeWeight = element.strokeWeight || @polylines_conf.strokeWeight
clickable = element.clickable || @polylines_conf.clickable
zIndex = element.zIndex || @polylines_conf.zIndex
icons = element.icons || @polylines_conf.icons
#add latlng if positions provided
if element.lat? && element.lng?
latlng = @createLatLng(element.lat, element.lng)
polyline_coordinates.push(latlng)
# Construct the polyline
new_poly = new google.maps.Polyline
path: polyline_coordinates
strokeColor: strokeColor
strokeOpacity: strokeOpacity
# Comment out since it doesn't exist in the object since it was commented
# out above
#strokeWeight: strokeWeight
clickable: clickable
zIndex: zIndex
icons: icons
#save polyline
polyline.serviceObject = new_poly
new_poly.setMap(@serviceObject)
これが変更されたものであり、ポリラインの作成を駆動するjsonにデータを入力する方法です。
作成直後にブレークポイントを設定してChromeで「new_poly」オブジェクトを検査し、setMap関数を使用してマップに追加した場合、これが返されるオブジェクトです（汎用アクセサーとオブジェクト参照が削除されます）。
new_poly
icons: Array[1]
0: Object
icon: Object
path: "M 0,-2 0,2"
strokeColor: "red"
strokeOpacity: 1
repeat: "24px"
length: 1
latLngs: Nf
map: xh
strokeColor: "yellow"
strokeOpacity: 0
だから、言われていることすべて、 私は何が起こっているのか分かりません。マップに追加されるポリラインオブジェクトは、すべての目的と目的で構造的に同じであるように見えます。gmaps4rails内に、マップに物を追加する方法に欠けているフェーズはありますか？
Update12012年8月21日 私はそのブランチを使用するようにすべてを変換しました。しかし、私は同じ問題を抱えています。jsfiddleを使用して、google / objects / polyline.coffee内のmergedOptionsオブジェクトから出力を取得し、gmaps4rails内から作成されたポリラインを表示しました。jsfiddleでは正常に動作しますが、gmaps4rails内で作成する場合はうまくいきません。これがフィドルへのリンクです：作業中の破線
そのため、マップに何もないことを確認するために、gmaps4railsコールバックに以下を追加しました。
var icon_array = {"icons":[{"repeat":"24px","icon":{"path":"M 0,-2 0,2","strokeOpacity":1,"strokeColor":"red", "scale": 4}}],"path":[{"$a":35,"ab":-70},{"$a":40,"ab":-80},{"$a":50,"ab":-85}],"strokeColor":"yellow"};
var route1 =
[
new google.maps.LatLng(35,-70),
new google.maps.LatLng(40,-80),
new google.maps.LatLng(50, -85)
];
console.log(icon_array);
icon_array.path = route1;
var path1 = new google.maps.Polyline(icon_array);
path1.setMap(Gmaps.map.map.serviceObject);
予想される破線の代わりに黄色の実線が作成されます。polyline.coffeeの新しいgoogle.maps.PolylinemergedOptions行に渡されたオブジェクトは、上記のJSON解析で使用したものです。JSONから解析するときに想定する型情報がないため、パス配列をリセットする必要がありましたが、ポリライン配列からpolylines.coffeeスクリプト内にgoogle lat / lngオブジェクトを作成するcreateLatLng関数があるため、客観的には正しいはずです。 。
本当に不思議です。マップの作成時にオプションを確認し始めましたが、問題を引き起こす可能性のあるものは何もないようです。