作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这里的问题是我从数据库中获取纬度和经度信息并使用信息窗口在谷歌地图上绘制多段线,它与标记一起工作得很好。但是信息窗口出现在谷歌地图的顶部,即使我已经设置了它的位置。我使用了如下代码:-
<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>
最佳答案
您必须更改 flightpath
的 click
事件监听器。
来自谷歌 API 引用 InfoWindow class方法 open()
定义为
open(map?:Map|StreetViewPanorama, anchor?:MVCObject)
在给定 map 上打开此信息窗口。可选地,InfoWindow 可以与 anchor 关联。在核心 API 中,唯一的 anchor 是 Marker 类。但是, anchor 可以是任何 MVCObject,它公开 LatLng 位置属性和可选的 Point anchorPoint 属性以计算 pixelOffset(请参阅 InfoWindowOptions)。 anchorPoint 是从 anchor 位置到 InfoWindow 尖端的偏移量。
您使用 flightPath
(折线)作为不提供位置属性的 anchor 。
因此,首先,您获得点击的位置,然后在 map 上打开信息窗口:
infoWindow.setPosition(e.latLng);
infoWindow.open(map);
// infoWindow.open(map,flightPath);
// infoWindow.setPosition(e.latLng);
检查 example at jsbin .注意:我不得不伪造 JSON.parse() 方法来获取一些数据。
关于javascript - 如何在谷歌地图的折线上方显示信息窗口?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21951146/
我是一名优秀的程序员,十分优秀!