2.1 基礎配置方法

通過Maps JavaScript API的scaleControl參數實現基礎控制：

const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 31.2304, lng: 121.4737},
    scaleControl: true,
    scaleControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM
    }
});

該配置可顯示公制/英制雙標尺系統，支持TOP/CENTER等6種定位模式

2.2 高級樣式定制

• 通過CSS覆蓋默認樣式：.gm-style .scale-control { background: rgba(0,128,0,0.7) }
• 動態比例尺系統：結合map.getZoom()實現閾值控制
• 混合單位顯示：通過UnitSystem枚舉值設置測量體系

3.1 控件定位矩陣

3.2 響應式設計策略

基于視口尺寸的動態布局調整方案：

function adjustControls() {
    const width = window.innerWidth;
    map.controls[google.maps.ControlPosition.RIGHT_CENTER].clear();
    if(width < 768) {
        map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(controlPanel);
    }
}