Question

在点击事件上，JavaScript绘制我的InfoBox窗口，然后在地图上自动调整它的位置。虽然自动调整地图平移到某个级别，但我不想这样做！如果我在右上角放置标记信息框应该在左边打开，如果我在地图的左角放置标记信息框应该在地图的右侧打开，同样的情况应该发生在地图的顶部和底部。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<style>
    .infobox-wrapper {
    display:none;
}
#infobox {
 background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #60AEA7;
    border-radius: 3px;
    height: 56px;
    left: 19%;
    padding: 0;
    position: absolute;
   margin-top: -107px;
    width: 214px;
    z-index: -9;
}
#infobox h3{
    background: none repeat scroll 0 0 #06A79E;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    overflow: hidden;
    padding: 5px 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
    margin-top:0px;
}

#infobox p{
    font-size: 12px;
    padding: 6px;
    margin-top: -13px; 
}

#infobox img{
 margin-left: 60px;
    position: relative;
    top: -25px;
}
</style>
<script type="text/javascript">
function initialize() {
    var loc, map, marker, infobox;

    loc = new google.maps.LatLng(-33.890542, 151.274856);
    loc = new google.maps.LatLng(-31.89542, 151.274856);

    map = new google.maps.Map(document.getElementById("map"), {
         zoom: 12,
         center: loc,
         mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    marker = new google.maps.Marker({
        map: map,
        position: loc,
        visible: true
    });
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var mm=new google.maps.Marker({
  position:myCenter,
  });

mm.setMap(map)
    infobox = new InfoBox({
         content: document.getElementById("infobox"),
         disableAutoPan: false,
         maxWidth: 150,
         pixelOffset: new google.maps.Size(-140, 0),
         zIndex: null,
         boxStyle: {
           width: "280px"
        },
        closeBoxMargin: "-105px 16px 2px 0",

        infoBoxClearance: new google.maps.Size(1, 1)
    });
    // $('.place_name').html("hi")
    google.maps.event.addListener(marker, 'click', function() {
            $(".place_name").html("Hello <b>world!</b>");
        infobox.open(map, this);

    });   
    google.maps.event.addListener(mm, 'mouseover', function() {
        infobox.open(map, this);

    });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<title>Creating and Using an InfoBox</title>
</head>

<body>
<div id="map" style="width: 100%; height: 500px"></div>
<br>


<div class="infobox-wrapper">
    <div id="infobox">
         <h3>Place Name : <span class="place_name">State Bank of India</span></h3>
            <p>Distance From Center : <span id="kmTxt">14 KM</span></p>

    </div>
</div>
</body>
</html>

JSFiddle

Answer 1

<强> jsFiddle

首先要做的是计算标记位于屏幕的四分之一处。这可以很容易地完成：获取地图的中心（map.getCenter()），标记的位置（marker.getPosition()）并减去long和lat值。如果地图的中心位于更左侧，则标记位于右侧，反之亦然。

现在，如果您知道标记在哪一侧，您可以轻松定位信息框。如果标记位于右侧，则将信息框更多地偏移到左侧，反之亦然（同样适用于顶部和左侧）。

查看小提琴的例子。它可以工作，但你应该自己改变指针的位置。

无需地图平移即可定位信息框

1 个答案: