如何使用gmap3插件删除渲染路线?

时间:2012-07-04 23:05:33

标签: google-maps-api-3 jquery-gmap3

我使用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>

3 个答案:

答案 0 :(得分:3)

绝对正常。

$map.gmap3({ action: 'clear', name: 'directionRenderer' });

*指示中 如果您以后绘制路线,则必须在下面写下代码,否则不显示方向。

$map.gmap3({ action: 'addDirectionsRenderer', preserveViewport: true, 
markerOptions: { visible: false} }, 
{ action: 'setDirectionsPanel', id: 'directions' });

...谢谢

答案 1 :(得分:0)

使用此:

$(mapID).gmap3({action:"clear", name:"directionRenderer"});

答案 2 :(得分:0)

上面选择的答案对我不起作用。我不确定它是否与版本相关,但我使用的解决方案更简单:

$(your-selector).gmap3({clear: {}});

之后,您可以绘制新路线,而无需重新连接使用地图渲染的路线。