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);

    }
});
}

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

提前致谢。

Answer 1

有可能，是的。它不是特别简单，因为谷歌不会给你许多勾引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也可能对您有用。

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

1 个答案: