将鼠标悬停事件添加到directionsRenderer Google Maps API v3

Add mouseover event to directionsRenderer Google Maps API v3

本文关键字：Google Maps API v3 directionsRenderer 鼠标 悬停 事件 添加      更新时间：2023-09-26

使用DirectionsService时，如何将鼠标悬停事件侦听器添加到directionsRenderer？

我知道如何在直线上添加侦听器，但似乎在directionsRenderer中找不到对象。

例如：

function getStraightLine(coordinates) {
    if (progress.length == 0)
            progress = coordinates;
        else
            progress.push(coordinates[1]);
        updateDistance();
        var line = new google.maps.Polyline({
            path: coordinates,
            strokeColor: "#FF0000",
            strokeOpacity: .5,
            strokeWeight: 2,
            map: map
        });
        google.maps.event.addListener(line, 'mouseover', function(){
            alert("moused over straight line!");
        });
        return line;
    }

但事实并非如此：

function getDirectionsPath(coordinates) {
        var directionsPath = new google.maps.DirectionsRenderer();
        directionsPath.setMap(map);
        var request = {
            origin: coordinates[0],
            destination: coordinates[1],
            travelMode: google.maps.TravelMode.WALKING
        };
        directionsService.route(request, function (result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                var coordinates = result.routes[0].overview_path;
                if (progress.length == 0)
                    progress = coordinates;
                else
                    progress = progress.concat(coordinates);
                directionsPath.setDirections(result);
                google.maps.event.addListener(directionsPath, 'mouseover', function(){
                    alert("moused over straight line!");
                });
            }
        });
        return directionsPath;
    }

我尝试了result、result.routes[0]和其他一些方法，而不是directionsPath。

那么我应该使用什么对象呢？

您会在setDirections(directionsResult)方法生成的"折线"上使用"拖动"事件吗？

如果你不这样做，我认为你可以自己创建一条"折线"，如下所示：

directionsService.route(request, function (result, status) 
{
        var myRoute = result.routes[0].legs[0];
        if (status == google.maps.DirectionsStatus.OK) 
        {
            for (var i = 0; i < myRoute.steps.length; i++) {
                for (var j = 0; j < myRoute.steps[i].lat_lngs.length; j++) {
                    points.push(myRoute.steps[i].lat_lngs[j]);
                }
            }
        }
    drawRoute();
}
function drawRoute() 
{
    var routLine = new google.maps.Polyline(
        {
            path: points,
            strokeColor: "Red",
            strokeOpacity: 0.5,
            strokeWeight: 10    
        }
    );
    routLine.setMap(mapCanvas);
    // Add a listener for the rightclick event on the routLine
    *google.maps.event.addListener(routLine, 'mouseover', function(){
                alert("moused over straight line!");
            });*
}

如果您已经解决了问题，请使用类似google.maps.DirectionsRenderer().setDirections(result)的方法？

第二个示例不起作用的原因是没有与DirectionsRenderer()类生成的对象关联的事件。它生成一个DirectionsResult对象。

http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsRenderer

基于文档：

http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsResult

DirectionsResult对象包含一个DirectionsRoutes数组。使用上面的代码，我将使用directionsPath对象来获得路由：directionsPath.routes，然后获得第一个路由directionsPath.routes[0]。

从那里开始，您需要使用directionsPath.routes[0]中的LatLngs数组来构造多段线，然后可以使用鼠标悬停事件。

相关文章：