标记鼠标悬停时可见的 Google 映射 api v3 折线答案

【问题标题】：Google maps api v3 polyline visible when marker mousover标记鼠标悬停时可见的 Google 映射 api v3 折线
【发布时间】：2015-02-24 02:26:40
【问题描述】：

                    // Aircraft on map
                    var marker = new google.maps.Marker({
                        position: myLatLng,
                        map: map,
                        icon: image,
                        optimized: false,
                        internalid: planes[15],
                        zIndex: planes[3],
                        rotation: planes[4],
                        mouseovertxt: '<b>'+planes[11]+'</b><br />'+planes[0]+'-'+planes[13]+'-'+planes[14]+'<br />Status: '+planes[16]+'<br />Alt: '+planes[9]+'ft &nbsp; Speed: '+planes[10]+'kts<br />EET: '+planes[17]

                    });

                    // Aircraft route
                    line = new google.maps.Polyline({
                        path: [dep, myLatLng],
                        strokeColor: "#c3524f",
                        strokeOpacity: 1,
                        strokeWeight: 2,
                        geodesic: true,
                        map: map,
                        polylineID: i,
                        visible: true
                        });
                    line2 = new google.maps.Polyline({
                        path: [myLatLng, arr],
                        strokeColor: "#c3524f",
                        strokeOpacity: .5,
                        strokeWeight: 2,
                        geodesic: true,
                        map: map,
                        polylineID: i,
                        visible: true
                        });

                    // On mouse over
                    google.maps.event.addListener(marker, 'mouseover', function () {
                        infowindow.setContent(this.mouseovertxt);
                        infowindow.open(map, this);
                        line.setVisible(false);
                        line2.setVisible(false);    
                    });

                    // On mouse out
                    google.maps.event.addListener(marker, 'mouseout', function () {
                        infowindow.close();
                        line.setVisible(true);
                        line2.setVisible(true);
                    });


                }
            }
            setMarkers(map, planes);


        });

现在我已经反转了线条的可见性，只是为了显示正确的线条出现了，但无论您悬停什么标记，其中只有一条会变为可见。这是因为我只有一个标记，还是有一个简单的解决方法？另外，我尝试修复滚动条错误，但没有运气。不过会尝试更多。

【问题讨论】：

标记（“什么标记”）的代码是什么样的？你的地图代码是什么样的？请提供一个 Minimal, Complete, Tested and Readable example 来证明该问题。
您说：“基本上，我希望仅在将鼠标悬停/鼠标悬停在标记上时才显示折线”。你做了什么来尝试这样做？您的代码中仍然没有定义地图。
好的，新的例子。看看以下内容：jsfiddle.net/s93sad03/37。我想要的是只在悬停/鼠标悬停标记时显示黑色折线，我该怎么做？我尝试将新的折线放入该 addListener 中，但我不知道如何再次将其删除。例如，是否可以在折线中定义折线“可见：假”，并在鼠标悬停事件中定义折线“可见：真”？谢谢
该方法简称为setVisiblejsfiddle.net/s93sad03/38
啊，就是这么简单，谢谢！如果我有一个 var = 标记，但有几个不同的标记，每个标记都有自己的行，你知道这会如何解决吗？我有几个标记/线，但是当悬停时，只有一条特定的线会启发，无论我悬停在什么标记上。

标签： google-maps google-maps-api-3 marker polyline

【解决方案1】：

可能的方法：

将线条存储为标记的属性，这样您就可以在鼠标处理程序中轻松访问它们：

                    // Aircraft on map
                    var marker = new google.maps.Marker({
                        position: myLatLng,
                        map: map,
                        icon: image,
                        optimized: false,
                        internalid: planes[15],
                        zIndex: planes[3],
                        rotation: planes[4],
                        line1:new google.maps.Polyline({
                        path: [dep, myLatLng],
                        strokeColor: "#c3524f",
                        strokeOpacity: 1,
                        strokeWeight: 2,
                        geodesic: true,
                        map: map,
                        polylineID: i,
                        visible: true
                        }),
                        line2:new google.maps.Polyline({
                        path: [myLatLng, arr],
                        strokeColor: "#c3524f",
                        strokeOpacity: .5,
                        strokeWeight: 2,
                        geodesic: true,
                        map: map,
                        polylineID: i,
                        visible: true
                        }),
                        mouseovertxt: '<b>'+planes[11]+'</b><br />'+planes[0]+'-'+planes[13]+'-'+planes[14]+'<br />Status: '+planes[16]+'<br />Alt: '+planes[9]+'ft &nbsp; Speed: '+planes[10]+'kts<br />EET: '+planes[17]

                    });

                    // On mouse over
                    google.maps.event.addListener(marker, 'mouseover', function () {
                        infowindow.setContent(this.mouseovertxt);
                        infowindow.open(map, this);
                        this.get('line1').setVisible(false);
                        this.get('line2').setVisible(false);

                    });


                    // On mouse out
                    google.maps.event.addListener(marker, 'mouseout', function () {
                        infowindow.close();
                        this.get('line1').setVisible(true);
                        this.get('line2').setVisible(true);
                    });

【讨论】：