将infoWindow放置在远离标记的静态位置(Google地图)

时间:2011-08-30 21:21:23

标签: google-maps-api-3 google-maps-markers

我想要取得的成就(到目前为止找不到任何东西)是因为infoWindow没有附加到标记上。我想将它放在我的视口中的静态位置,然后根据点击的标记交换内容。

问:如何在固定位置放置(而不仅仅是偏移)谷歌地图标记信息窗。

1 个答案:

答案 0 :(得分:4)

回答我自己的问题 - 万一有人需要这个:

// Add somewhere before creating your map to hide the info window as long as it got no content:
<script type="text/javascript">
jQuery( '#info' ).hide();
</script>

<script type="text/javascript">
function createMarker( lat, lng, whatever ) {
    // map_object_name = the name of your map when you init()
    html = "<strong>" + whatever + "</strong>";

    var marker = new google.maps.Marker( {
        map: map_object_name,
        position: new google.maps.LatLng( lat, lng )
    } );

    // This snippet adds the content on the fly (when you click the marker)
    google.maps.event.addListener( marker, 'click', function() {
        // This pans the viewport/centers the marker in your viewport
        map_object_name.panTo( new google.maps.LatLng( lat, lng ) );

        // This shows the html-element with the id "info" and adds the html content
        jQuery( '#info' ).show();
        // This clears the content before you add new one
        jQuery( '#info' ).empty();
        jQuery( '#info' ).append( html );

        // Commented out - just as reference
        // infoWindow.setContent( html ); // the original infoWindow as you know it from Google Maps
        // infoWindow.open( map_object_name, marker ); // the same, just the callback
    } );
}
</script>

#info元素的“放置”/定位可以通过普通的html&amp;的CSS。