GMAP3プラグインを使用して運転方向をレンダリングします。クリアボタンを追加してクリアできるようにしたいのですが、GMAP3で正しい構文を見つけることができませんでした。これが私のjsコードで、gmap3.netのサンプルから変更されています。マーカーはすでにプロットされており、latlngは、マップ上のクリック位置からではなく、プロットされたマーカーから取得されます。
function removePath() {
$(mapID).gmap3({
action: 'clear',
name: 'directionRenderer'
// tag: 'path' // works too with tag instead of name
});
function updatePath() {
$(mapID).gmap3({
action: 'getRoute',
options: {
origin: m1.getPosition(),
destination: m2.getPosition(),
travelMode: google.maps.DirectionsTravelMode.DRIVING
},
callback: function (results) {
if (!results) return;
$(mapID).gmap3({
action: 'setDirections',
directions:results,
});
}
});
};
function updateDirection(mm) { // Directions between m1 and m2
var mmID = $(mm).prop('id');
...
if (mmID == 'clearDirection') {
...
removePath();
return;
};
...
if (m1 && m2) { updatePath(); };
};
function initmap() {
$(mapID).gmap3(
{
action: 'init',
options: defaultMapOptions
},
// add direction renderer to configure options (else, automatically created with default options)
{ action: 'addDirectionsRenderer',
preserveViewport: true,
markerOptions: { visible: false },
options: {draggable:true},
tag: 'path'
},
// add a direction panel
{ action: 'setDirectionsPanel',
id: 'directions'
}
);
};
Aは、方向パネルとしてHTMLドキュメントに配置されています。これには、jquerycssプロパティの変更を使用してルートがクリアされたときに非表示になるラッパーがあります。ラッパーdivのdisplayプロパティは、値がm1またはm2のいずれかに割り当てられるたびに、「block」に戻されます。
<body>
...
<div id="direction_container" class="shadowSE">
....
<div id="directions"></div>
....
</div>
</body>