如何在Google Map中的折線上方顯示信息窗口？

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

你必須改變click事件偵聽器flightpath。

從谷歌API參考InfoWindow class方法open()被定義爲

open(map?:Map|StreetViewPanorama, anchor?:MVCObject)打開給定的地圖上的這個信息窗口。可選地，InfoWindow可以與錨點關聯。在覈心API中，唯一的錨是Marker類。但是，錨點可以是任何MVCObject，它公開LatLng position屬性和可選的Point anchorPoint屬性以計算pixelOffset（請參閱InfoWindowOptions）。 anchorPoint是從錨的位置到InfoWindow的頂端的偏移量。

您使用flightPath（折線）作爲不提供位置屬性的錨點。

所以，首先，你在地圖上點擊的位置，然後只需打開信息窗口：

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

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

檢查example at jsbin。注意：我不得不僞造JSON.parse（）方法來獲取一些數據。