标记鼠标悬停时谷歌可以看到api v3折线

时间:2014-12-26 22:56:08

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

                    // 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);


        });

现在我已经改变了线条的可见性,只是为了显示正确的线条出现,但无论你悬停什么标记,它们中只有一条会变得可见。这是因为我只有一个标记,还是有一个简单的解决方法呢?此外,我尝试修复滚动条错误,但没有运气。会尝试一些。

1 个答案:

答案 0 :(得分:0)

可能的方法:

将行存储为标记的属性,而不是在鼠标处理程序中轻松访问它们:

                    // 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);
                    });