谷歌地图:如何移动缩放控件?

时间:2010-04-14 14:12:22

标签: javascript google-maps

如何通过API将Google地图缩放控件移动到地图的另一侧?

5 个答案:

答案 0 :(得分:25)

var myOptions = {
                zoom: 6,

                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.SMALL,
                    position: google.maps.ControlPosition.LEFT_CENTER
                },

                scaleControl: true,
                panControl: true,
                navigationControl: false,              
                mapTypeId: 'roadmap',
                streetViewControl: false,
                center: new google.maps.LatLng(XXX,XXX)
            }

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

答案 1 :(得分:3)

假设您使用的是API的第2版:

map.addControl(new GLargeMapControl3D(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10)));

请注意,GSize会将其定位在您想要的位置。如果你想进一步向下,而不是给第二个参数

更高的值

答案 2 :(得分:1)

这里我使用google maps api v3,因为v2已被弃用

    function initialize()
    {
    var mapProp = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom:7,
    panControl:false,
    zoomControl:true,
    zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL,
    position: google.maps.ControlPosition.RIGHT
    },
    mapTypeControl:false,
    scaleControl:false,
    streetViewControl:false,
    overviewMapControl:false,
    rotateControl:false,    
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

答案 3 :(得分:0)

从文档中可以支持以下控制位置:

  • TOP_CENTER 表示应将控件放置在地图的顶部中心。
  • TOP_LEFT 表示控件应沿着地图的左上方放置,控件的任何子元素都将“朝着”顶部居中流动。
  • TOP_RIGHT 表示控件应沿着地图的右上角放置,控件的任何子元素都“朝着”顶部中心流动。
  • LEFT_TOP 表示控件应沿着地图的左上方放置,但应位于任何TOP_LEFT元素的下方。
  • RIGHT_TOP 表示控件应沿着地图的右上角放置,但应位于所有TOP_RIGHT元素的下方。
  • LEFT_CENTER 表示控件应沿着地图的左侧放置,并位于TOP_LEFT和BOTTOM_LEFT位置之间。
  • RIGHT_CENTER 表示控件应沿着地图的右侧放置,并位于TOP_RIGHT和BOTTOM_RIGHT位置之间。
  • LEFT_BOTTOM 表示该控件应沿着地图的左下角放置,但应位于所有BOTTOM_LEFT元素的上方。
  • RIGHT_BOTTOM 表示控件应沿着地图的右下角放置,但应位于所有BOTTOM_RIGHT元素的上方。
  • BOTTOM_CENTER 表示控件应沿地图的底部中心放置。
  • BOTTOM_LEFT 表示控件应沿着地图的左下放置,控件的任何子元素都将“朝着底部中心流动”。
  • BOTTOM_RIGHT 指示控件应沿着地图的右下角放置,控件的任何子元素都“朝着”底部中心流动。

来源:https://developers.google.com/maps/documentation/javascript/controls


例如:

const options: google.maps.MapOptions = {
  // your options
  zoomControlOptions: {
    position: google.maps.ControlPosition.LEFT_BOTTOM
  }
};

const map = new google.maps.Map(document.getElementById('map'), MAP_DEFAULT_OPTIONS);

答案 4 :(得分:-1)

在css中使用它:

.gmnoprint:nth-child(9) { left: 50%; }