Question

我有一个使用google maps api v3的系统，系统非常大，我加载了各种javascript模块。现在我发现了一个棘手的问题：如果我使用setOptions设置地图选项，则删除先前的设置：

即，如果我的一个模块需要更改地图选择器的位置：

my_map.setOptions({ mapTypeControlOptions: 
      { position: google.maps.ControlPosition.TOP_RIGHT }
});

它将重置另一个模块的设置，即添加新的地图类型!! ：

my_map.setOptions({ mapTypeControlOptions: {
                            mapTypeIds: [
                                    google.maps.MapTypeId.ROADMAP,
                                    google.maps.MapTypeId.SATELLITE,
                                    google.maps.MapTypeId.HYBRID,
                                    google.maps.MapTypeId.TERRAIN,
                                    'OSM',
                                    'OCM'
                            ]
})

我正在考虑一种解决方法，它将获得当前选项，合并到新选项中，然后运行setOptions。但是there is no clean way to get the google.maps.Map options！

这真的很糟糕......这真的诱惑我不要direct object modification as I asked in another question，但这可能是危险的，对吧？但是用Google maps api v3以干净的方式进行编程确实很难!!

任何解决方案，想法，解决方法？

Answer 1

我通常做的是将我的地图选项存储在我可以检索它们的地方，并在设置它们之前根据需要进行更改。您可以为此目的使用本地存储的全局JS变量。例如：

var myOptions = { zoom : 12};
map.setOptions(myOptions);
...
myOptions.mapTypeControlOptions = {
                        mapTypeIds: [
                                google.maps.MapTypeId.ROADMAP,
                                google.maps.MapTypeId.SATELLITE,
                                google.maps.MapTypeId.HYBRID,
                                google.maps.MapTypeId.TERRAIN,
                                'OSM',
                                'OCM'
                        ]};
map.setOptions(myOptions);

Answer 2

事实上，在这种情况下，Google地图选项并未得到保留。但您可以考虑以下解决方法。

即使google.maps.Map class没有公开MapTypeControlOptions property的访问者，您仍然可以使用以下方法访问它（并因此修改它）：

var options = map.mapTypeControlOptions;  //undocumented

以下示例演示了如何保留Google地图选项：

＆＃13;

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: { lat: -28.643387, lng: 153.612224 },
        mapTypeControl: true
    });

    printInfo('Settting map type control options...')
    setMapTypeControlOptions(map);

    var before = JSON.stringify(map.mapTypeControlOptions);
    printInfo('Before:' + before);


    printInfo('Setting map type control options position..');
    setMapTypeControlOptionsPosition(map,google.maps.ControlPosition.TOP_RIGHT);

    var after = JSON.stringify(map.mapTypeControlOptions);
    printInfo('After:' + after);
}


function setMapTypeControlOptions(map) {
    map.setOptions({
        mapTypeControlOptions: {
            mapTypeIds: [
                    google.maps.MapTypeId.ROADMAP,
                    google.maps.MapTypeId.SATELLITE,
                    google.maps.MapTypeId.HYBRID,
                    google.maps.MapTypeId.TERRAIN
            ]
        },
        mapTypeId: google.maps.MapTypeId.TERRAIN,
    });

}


function setMapTypeControlOptionsPosition(map,value){
    /*map.setOptions({
        mapTypeControlOptions:
           { position: value }
    });*/
    var options = map.mapTypeControlOptions;
    options.position =  value;
}


function printInfo(s){
    //console.log(s);
    document.getElementById('output').innerHTML += s + '<br/>';
}

＆＃13;

 html, body {
            height: 220px;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 220px;
        }

＆＃13;

 <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap" async defer>
    </script>
<div id='output'/>

＆＃13;

如何在保留以前的设置的同时设置google.maps.Map选项？

2 个答案: