如何在Google地图中的折线上方显示信息窗口?

普里扬卡

这里的问题是我正在从数据库中获取纬度和经度信息,并使用“信息窗口”在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>
安托·尤尔科维奇(AntoJurković)

您必须更改的click事件监听器flightpath

从谷歌API参考InfoWindow类的方法open()定义为

open(map?:Map|StreetViewPanorama, anchor?:MVCObject) 在给定的地图上打开此InfoWindow。(可选)InfoWindow可以与锚关联。在核心API中,唯一的锚点是Marker类。但是,锚点可以是任何公开LatLng位置属性的MVCObject,还可以是用于显示pixelOffset的Point anchorPoint属性(请参见InfoWindowOptions)。anchorPoint是从锚点位置到InfoWindow尖端的偏移量。

您将flightPath(Polyline)用作不提供位置属性的锚点。

因此,首先,您获得了点击的位置,然后只需在地图上打开信息窗口即可:

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

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

在jsbin上查看示例注意:我必须伪造JSON.parse()方法来获取一些数据。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在iOS Google地图中显示“信息”窗口而不点击“标记”?

如何在谷歌地图的折线上方添加文本?

如何在Google Maps API中的“方向”折线上方显示“路况”图层

如何在地图视图中的图钉上方显示所有标题?

折线未显示在Google地图中

如何在离子本机Google地图中将折线拟合到屏幕内部

如何在此处地图SDK 3.6中的标记上显示信息窗口

如何在R的传单地图中的弹出窗口上显示多个文本

如何在地图视图上显示自定义信息窗口

如何在一张Google地图上的Flutter中显示多组折线

如何在Google地图中不显示标记图标的情况下显示信息窗口

从新版Google地图中的嵌入式地图中删除信息窗口

如何在本地Google地图中显示图像?

从Google地图中删除折线

如何在Google地图中显示和忽略KML图层

Google地图不显示折线

为路线上的Google地图标记(起点和终点)设置信息窗口

如何在Android的地图内的信息窗口中显示所有国家/地区的温度?

谷歌地图折线信息窗口

如何在Google聊天的折线图中插入点处显示气泡或正方形

如何在Google地图中设置多个信息窗口,但是使用此特定的javascript方法

如何在折线图中显示其他点信息?

如何在路线上显示时间为谷歌地图

如何在非常大的窗口中显示Google地图?

Swift 3:如何在 Google 地图中删除跟踪的折线

在 Google 散点图上单击显示 Google 地图信息窗口

谷歌地图中每条折线的信息窗口未使用 javascript 显示

如何在地图上显示折线

如何在 Google 地图中的“Google”标签上方定位自定义地图控件?