没有地图平移的定位信息框答案

【问题标题】：Positioning Infobox without map pan没有地图平移的定位信息框
【发布时间】：2014-04-07 11:06:01
【问题描述】：

点击事件时，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

【问题讨论】：

欢迎！你能否扩展你的问题，更清楚地解释问题是什么，如果可能的话，由 jsfiddle 陪同？也请只发布相关代码，并附上解释。

标签： jquery google-maps google-maps-api-3 infowindow

【解决方案1】：

jsFiddle

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

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

以小提琴为例。它可以工作，但您应该自己更改指针位置。

【讨论】：

谢谢它的工作！ mapCenter.d , markerPosition.d ,mapCenter.e,markerPosition.e 表示什么？
这些是 Long/Lat 值。结帐the manual