0

こんにちは、Yelp gmap サービスに似た gmap を統合した Web アプリがあります。問題は、マーカーをマウスオーバーすると、インフォボックスが次のようにボックス内にスタックすることです。

ここに画像の説明を入力

インフォボックスは次のようになります

ここに画像の説明を入力

以下はgmapを統合するための私の現在のコードです

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"></script>

<script type="text/javascript">

    var gmap, gpoints = [];

    $(document).ready(function() {
        initialize();
    });

function initialize() {

        gmap = new google.maps.Map(document.getElementById('themap'), {
            zoom:               8,
            streetViewControl:  false,
            scaleControl:       false,
            center:             new google.maps.LatLng(3.3000000,101.9629796),
            mapTypeId:          google.maps.MapTypeId.ROADMAP
        });
 <?php
$content = '<p>Test</p>'; 
?>
 gpoints.push( new point(gmap, '<?php echo $lat; ?>', '<?php echo $long; ?>', '<?php echo $content; ?>') );
}

 function point(_map, lat, lng, content) {
        this.marker = new google.maps.Marker({
            position:           new google.maps.LatLng(lat,lng),
            map:                _map,
            zIndex: 11
        });
this.content = content;



        var gpoint = this;


        google.maps.event.addListener(gpoint.marker, 'mouseover', function() {
            popup(gpoint);
        });

google.maps.event.addListener(_map, 'zoom_changed', function() {
            center=gpoint.marker.getPosition();
            lat=center.lat();
            lng=center.lng();
           // alert(lat+"===="+lng);
        });    
}

 function popup(_point) {
        _point.popup = new InfoBox({
            content: _point.content,
            position:  _point.marker.getPosition(),
           // shadowStyle: 1,
            padding: 20,
            //backgroundColor: '#ddd',
            borderRadius: 10,
            arrowSize: 10,
            borderWidth: 1,
           // borderColor: '#dddddd',
            disableAutoPan: true,
            arrowPosition: 30,
           // backgroundClassName: 'phoney',
            arrowStyle: 2


        });

_point.popup.open(_point.marker.map, _point.marker);

        google.maps.event.addListener(_point.popup, 'domready', function() {                    
            google.maps.event.addDomListener(_point.marker, 'mouseout', function() {
                _point.popup.close();
            });
        });

}

</script>
4

1 に答える 1

0

pixelOffsetinfoBoxのオプションを使用して、マーカーに関連する位置を制御できます。

デフォルトは 0,0 です。これは、infoBox の左上隅が (マーカーの) 位置に固定されることを意味します。

上部中央に配置するには、infobox のコンテンツに明示的に割り当て、次のように pixelOffset を適用する必要があります。

pixelOffset:new google.maps.Size(-halfOfWidthOfTheBox,0)

infoBox のサイズがわからない場合は、計算することができます。これを のdomready-callback に追加し_point.popupます:

this.setOptions({pixelOffset:new google.maps
                             .Size(-parseInt(this.div_.offsetWidth/2,10),0)});
于 2013-01-09T12:22:52.737 に答える