如何将谷歌地图不居中置于屏幕中央？ [英] How to center the Google Map NOT at the center of the screen?
问题描述
我有一个基于Google地图的网站（使用gmap3），其上有标记和浮动小部件，其中包含有关活动标记的文字。这个浮动小部件占用大约一半的屏幕。地图自动居中（或平移）到活动标记。
正如您从上面看到的，屏幕中央的活动标记非常接近文本小部件的右侧（它几乎覆盖了屏幕的所有左侧）。我想让它更松散 - 比方说，不在屏幕中央，但是左起三分之一左右（水平，当然，垂直方向应该保持居中）。
换句话说，我想要以下内容：当一个新标记被选为活动时，地图应该平移到这样的位置，这个标记在屏幕的1/3左右宽度从屏幕的右侧。
更改地图中心的纬度不会有帮助，因为这可以在任何缩放级别上工作。我需要panTo（width：66％; height：50％）（当然这不是真正的代码）。
预先感谢您。 / p>
（函数（$）{
var $ et_main_map = $（'#et_main_map'）;
et_active_marker = null;
$ et_main_map.gmap3（{
map：{
options：{
<？php
while（have_posts （））：the_post（）;
$ et_location_lat = get_post_meta（get_the_ID（），'_et_listing_lat'，true）;
$ et_location_lng = get_post_meta（get_the_ID（），'_et_listing_lng'，true）; $ b （''！= $ et_location_lat&''！= $ et_location_lng）
printf（'center：[％s，％s]，'，$ et_location_lat，$ et_location_lng） ;
break;
endwhile;
rewind_posts（）;
？>
zoom：<？php
if（is_home（）|| is_front_page（））
echo esc_js（et_ge t_option（'explorable_homepage_zoom_level'，3））;
else
echo esc_js（et_get_option（'explorable_default_zoom_level'，5））; >，
mapTypeId：google.maps.MapTypeId。<？php echo esc_js（strtoupper（et_get_option（'explorable_map_type'，'Roadmap'）））; ？>，
mapTypeControl：false，
mapTypeControlOptions：{
position：google.maps.ControlPosition.LEFT_CENTER，
style：google.maps.MapTypeControlStyle.DROPDOWN_MENU
}，
streetViewControlOptions：{
位置：google.maps.ControlPosition.LEFT_CENTER
}，
navigationControl：true，
滚动：false，
streetViewControl： false，
zoomControl：true，
zoomControlOptions：{
position：google.maps.ControlPosition.RIGHT_BOTTOM，
style：google.maps.ZoomControlStyle.SMALL
}，
}
}
}）;
您可以先将地图放在给定的LatLng上，然后使用 panBy（）来应用偏移量：
map.panBy （-Math.floor（map.getDiv（）。offsetWidth / 6），0）
你可以使用map-option的event-property来应用它：
添加下面的代码：
$ $ p $ events： {
idle：function（map）{
google.maps.event.clearListeners（map，'idle'）;
map.panBy（-parseInt（this.width（）/ 6），0）;
}
}，
紧随其后
$ et_main_map.gmap3（{
map：{
I have a site based on Google Maps (using gmap3), which has markers and a floating widget above it, that contains a text about the active marker. This floating widget takes about half of the screen. The map is automatically centered (or panned to) the active marker.
As you see from the above, the active marker in the center of the screen is very close to the right side of the text widget (which covers almost all left side of the screen). I would like to have it more loose - say, not in the center of the screen, but about 2/3 from the left and 1/3 from the right (horizontally, of course; vertically it should stay centered).
In other words, I want the following: when a new marker is selected as active, the map should pan to such position, that this marker is in about 1/3 of the screen width from the right side of the screen.
Changing the latlng of the map's center won't help, because this should work on any zoom level. I need something like "panTo (width: 66%; height:50%)" (this is not real code, of course).
Thank you in advance.
( function($){
var $et_main_map = $( '#et_main_map' );
et_active_marker = null;
$et_main_map.gmap3({
map:{
options:{
<?php
while ( have_posts() ) : the_post();
$et_location_lat = get_post_meta( get_the_ID(), '_et_listing_lat', true );
$et_location_lng = get_post_meta( get_the_ID(), '_et_listing_lng', true );
if ( '' != $et_location_lat && '' != $et_location_lng )
printf( 'center: [%s, %s],', $et_location_lat, $et_location_lng );
break;
endwhile;
rewind_posts();
?>
zoom: <?php
if ( is_home() || is_front_page() )
echo esc_js( et_get_option( 'explorable_homepage_zoom_level', 3 ) );
else
echo esc_js( et_get_option( 'explorable_default_zoom_level', 5 ) ); ?>,
mapTypeId: google.maps.MapTypeId.<?php echo esc_js( strtoupper( et_get_option( 'explorable_map_type', 'Roadmap' ) ) ); ?>,
mapTypeControl: false,
mapTypeControlOptions: {
position : google.maps.ControlPosition.LEFT_CENTER,
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
navigationControl: true,
scrollwheel: false,
streetViewControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM,
style: google.maps.ZoomControlStyle.SMALL
},
}
}
});
You may first center the map at the given LatLng and then use panBy() to apply the offset:
map.panBy(-Math.floor(map.getDiv().offsetWidth/6),0)
For gmap3 you may use the event-property of the map-option to apply it: add the following code
events:{
idle:function(map){
google.maps.event.clearListeners(map,'idle');
map.panBy(-parseInt(this.width()/6),0);
}
},
right after
$et_main_map.gmap3({
map:{
这篇关于如何将谷歌地图不居中置于屏幕中央？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
