如何在谷歌地圖中的折線上方顯示信息窗口？

Question

這里的問題是我從數據庫中獲取緯度和經度信息，並使用信息窗口在Google地圖上繪制折線，它與標記一起工作正常。但是，即使我設置了它的位置，Google地圖上也會出現信息窗口。 我使用的代碼如下： -

 <script type="text/javascript">


 function initialize()
        {
          var map;

           var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
     var infoWindow = new google.maps.InfoWindow({maxWidth:200,minWidth:200});
           var marker;

           var x=new google.maps.LatLng(16.697000,74.244000);
       var stavanger=new google.maps.LatLng(markers[0].lat1, markers[0].lng1);

         var london=new google.maps.LatLng(markers[0].lat, markers[0].lng);
           var j=0;

           var i=0;
           var points=new Array();
           var points2=new Array();

           var mapProp = {
           center:new google.maps.LatLng(markers[0].lat, markers[0].lng),
           zoom:14,
           mapTypeId:google.maps.MapTypeId.ROADMAP

            }; 
   var map=new google.maps.Map(document.getElementById("map_canvas"),mapProp);

             google.maps.event.addListener(map, "click", function(event)
        {

                var marker = new google.maps.Marker({
                position: event.latLng, 
                 animation: google.maps.Animation.DROP,
                map: map

                });


              document.getElementById("txttolat").value = event.latLng.lat();
             document.getElementById("txttolong").value = event.latLng.lng();

               var pt=event.latLng.lat();
             points[j]=event.latLng.lat();

             points2[j]=event.latLng.lng();
             j=j+1;

              document.getElementById("txtlat").value = points[0];
             document.getElementById("txtlong").value = points2[0];
             //            });

              });

             for (i = 0; i < markers.length; i++) {
             var data = markers[i]

    var stavanger2=new google.maps.LatLng(markers[i].lat1, markers[i].lng1);

         var london2=new google.maps.LatLng(markers[i].lat, markers[i].lng);

              var myTrip=[stavanger2,london2];
               var flightPath=new google.maps.Polyline({




                path:myTrip,
            strokeColor:"#0000FF",
             strokeOpacity:0.8,
             strokeWeight:10,
               map: map,
               title: data.title
                    });
                  // }
                  (function(flightPath, data) {

           google.maps.event.addListener(flightPath, 'click', function(e) {
                 // alert('you clicked polyline');

               infoWindow.setContent(data.description);

                 infoWindow.open(map,flightPath);
                 infoWindow.setPosition(e.latLng);
                 document.getElementById("txtname").value = data.title;

                  document.getElementById("txtlat").value = e.latLng.lat();
                  document.getElementById("txtlong").value = e.latLng.lng();
                     });

                      })(flightPath, data);


                       }
                       }



               google.maps.event.addDomListener(window, 'load', initialize);
                    </script>

Answer 1

您必須更改flightpath click事件偵聽flightpath 。

從google api引用InfoWindow類方法open()定義為

open(map?:Map|StreetViewPanorama, anchor?:MVCObject) 在給定的地圖上打開此InfoWindow。 可選地，InfoWindow可以與錨相關聯。 在核心API中，唯一的錨是Marker類。 但是，錨可以是任何公開LatLng位置屬性的MVCObject，也可以是用於計算pixelOffset的Point anchorPoint屬性（請參閱InfoWindowOptions）。 anchorPoint是從錨點位置到InfoWindow尖端的偏移量。

您使用flightPath （Polyline）作為不提供位置屬性的錨點。

所以，首先，你獲得點擊的位置，然后在地圖上打開infowindow：

infoWindow.setPosition(e.latLng);
infoWindow.open(map);

// infoWindow.open(map,flightPath);
// infoWindow.setPosition(e.latLng);

檢查jsbin上的示例 。 注意：我不得不偽造JSON.parse（）方法來獲取一些數據。