我使用 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 文档中作为方向面板放置。它有一个包装器,当使用 jquery css 属性更改清除路由时,它会被隐藏。每当将值分配给 m1 或 m2 时,包装器 div 的显示属性都会更改回“块”。
<body>
...
<div id="direction_container" class="shadowSE">
....
<div id="directions"></div>
....
</div>
</body>