自定义 Google API 中的默认 mapType 按钮

Question

我正在尝试自定义 Google API 中的默认 mapType 按钮。我要做的是尝试增加 mapType 框的高度，这是代码：

function initLeftMap(initialMapTypeId, planClicked) {
var initialMap_url;
var initialMap_name;
var initialMap_svc = new gmaps.ags.MapService(initialMap_url);
google.maps.event.addListenerOnce(initialMap_svc, 'load', function () {
    try {
        if (initialMapTypeId == "onemap") {
            initialMap_svc.spatialReference.wkid = 3414;  // impt! or else
            // overlays
            // can't show on
            // onemap

        }

        var initialMap_tileLayer = new gmaps.ags.TileLayer(initialMap_svc);
        var initialMap_agsType = new gmaps.ags.MapType([initialMap_tileLayer], {
            name: initialMap_name
        });
        var myOptions = {
            zoom: 12,
            maxZoom: 18,
            minZoom: 11,
            backgroundColor: '#fff',
            center: new google.maps.LatLng(1.347074, 103.81382),
            mapTypeId: initialMapTypeId, // google.maps.MapTypeId.ROADMAP
            mapTypeControlOptions: {
                mapTypeIds: [initialMapTypeId,
                                google.maps.MapTypeId.ROADMAP,
                                google.maps.MapTypeId.SATELLITE,
                                google.maps.MapTypeId.HYBRID],
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            streetViewControl: true,
            scaleControl: true
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        map.mapTypes.set(initialMapTypeId, initialMap_agsType);

                    google.maps.event.addListener(map, 'maptypeid_changed', function (e) {
            toggleBaseMapLegend();
        });

        initRightMap(initialMapTypeId, initialMap_agsType, planClicked);
        //load the last viewed extent
        loadLastState();

        // init after map is created
        initBuffer(map);
    } catch (e) {
        alert(e);

    }
});
}

我想知道有没有办法通过在 style 标签下使用 css 来设置它的样式？或者有没有更好的方法来定制它，只增加盒子的高度？

提前致谢。

Answer 1

有可能，是的。这不是特别容易，因为 Google 没有给你很多钩子来确定 div，而且它不是一个文档化的功能，所以他们可以随时更改它。

查看页面源，最好的办法是使用gm-style-mtc 类来定位地图选择器的基础div：

<div class="gmnoprint gm-style-mtc" style="margin: 5px; z-index: 0; position: absolute; cursor: pointer; text-align: left; width: 200px; right: 0px; top: 0px; background-color: rgb(255, 35, 0);">

所以你的 CSS 变成：

<style>
     .gm-style-mtc > div:first-child {
         width: 150px;
         height: 60px;
         ...and so on
     }
</style>

您可以使用.gm-style-mtc > div、gm-style-mtc > div > div 等的某种组合来定位孩子（下拉菜单中的各个选项等）。child selectors 带来无穷乐趣。

This question 也可能对您有用。