在某个位置显示div [英] Displaying div at certain location

问题描述

嗨


我想在谷歌地图上显示一个div，以'marker'为中心。



问题：div拒绝出现。

 window.infoWindow = document.getElementById（infoWindow）; 
 
 infoWindow.innerHTML = marker.title; 
 infoWindow.style.display ='block'; 
 
 var scale = Math.pow（2，gmap.getZoom（））; 
 var worldCoordinateNW = gmap.getProjection（）。fromLatLngToPoint（new google.maps.LatLng（gmap.getBounds（）。getNorthEast（）。lat（），gmap.getBounds（）。getSouthWest（）。lng（）） ）; 
 var worldCoordinate = gmap.getProjection（）。fromLatLngToPoint（marker.getPosition（））; 
 
 infoWindow.style.left = Math.floor（（worldCoordinate.x  -  worldCoordinateNW.x）* scale）; 
 infoWindow.style.top = Math.floor（（worldCoordinate.y  -  worldCoordinateNW.y）* scale）; 

< div class =container> 
< div id =infoWindow> 
< div class =dropdown-content> 
< a href =＃>链接1< / a> 
< a href =＃>链接2< / a> 
< a href =＃>链接3< / a> 
< / div> 
< / div> 
< / div> 

 #infoWindow 
 {
宽度：300px; 
身高：600px; 
仓位：绝对; 
 / * display：none; * / 
} 
 
 .container 
 {
宽度：200px; 
身高：400px; 
颜色：白色; 
} 
 
 .container a 
 {
宽度：200px; 
身高：24px; 
颜色：白色; 
填充：12px 16px; 
 text-decoration：none; 
 display：block; 
} 
 
 .container a：hover 
 {
 background-color：＃f1f1f1; 
} 

我的尝试：



上面的代码



......................... ...................................

解决方案

< blockquote>关闭地图下方显示的信息窗口。必须将信息窗口的顶部设置为0。

Hi
I'm looking to make a div appear over a google map, centred on 'marker'.

Issue: The div refuses to appear.

window.infoWindow = document.getElementById("infoWindow");

infoWindow.innerHTML = marker.title;
infoWindow.style.display = 'block';
				
var scale = Math.pow(2, gmap.getZoom());
var worldCoordinateNW = gmap.getProjection().fromLatLngToPoint(new google.maps.LatLng(gmap.getBounds().getNorthEast().lat(), gmap.getBounds().getSouthWest().lng()));
var worldCoordinate = gmap.getProjection().fromLatLngToPoint(marker.getPosition());
				
infoWindow.style.left =	Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale);
infoWindow.style.top = Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale);

<div class="container">
    <div id="infoWindow">
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
</div>

#infoWindow
{
	width: 300px;
	height: 600px;
	position: absolute;
	/* display: none; */
}

.container
{
	width: 200px;
	height: 400px;
	color: white;
}

.container a
{
	width: 200px;
	height: 24px;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.container a:hover
{
	background-color: #f1f1f1;
}

What I have tried:

The code above

............................................................

解决方案

Turns out the info window was being displayed underneath the map. Had to set the info window's top to 0.

这篇关于在某个位置显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！