同一页面上有多个谷歌地图，样式相同

Question

我想在一页上有多个谷歌地图。

我有这个代码，但我不知道该怎么做。

必须添加什么？

我想要其他风格相同的地图。

还有一个问题是谷歌地图没有加载完整

谁能帮帮我？

    function initialize() {

            var styles = [
                {
                    featureType: 'water',
                    elementType: 'all',
                    stylers: [
                        { hue: '#E6E6E6' },
                        { saturation: -100 },
                        { lightness: 59 },
                        { visibility: 'on' }
                    ]
                },{
                    featureType: 'landscape.natural',
                    elementType: 'all',
                    stylers: [
                        { hue: '#999999' },
                        { saturation: -100 },
                        { lightness: -37 },
                        { visibility: 'on' }
                    ]
                },{
                    featureType: 'road',
                    elementType: 'all',
                    stylers: [
                        { hue: '#4C4C4C' },
                        { saturation: -100 },
                        { lightness: -53 },
                        { visibility: 'simplified' }
                    ]
                },{
                    featureType: 'landscape.man_made',
                    elementType: 'all',
                    stylers: [
                        { hue: '#ffffff' },
                        { saturation: -100 },
                        { lightness: 100 },
                        { visibility: 'on' }
                    ]
                },{
                    featureType: 'road.highway',
                    elementType: 'all',
                    stylers: [
                        { hue: '#bfbfbf' },
                        { saturation: -100 },
                        { lightness: 30 },
                        { visibility: 'on' }
                    ]
                },{
                    featureType: 'road.arterial',
                    elementType: 'labels',
                    stylers: [
                        { hue: '#bfbfbf' },
                        { saturation: -100 },
                        { lightness: -3 },
                        { visibility: 'simplified' }
                    ]
                },{
                    featureType: 'road.local',
                    elementType: 'geometry',
                    stylers: [
                        { hue: '#f1f1f1' },
                        { saturation: -100 },
                        { lightness: -5 },
                        { visibility: 'simplified' }
                    ]
                },{
                    featureType: 'poi',
                    elementType: 'all',
                    stylers: [
                        { hue: '#e6e6e6' },
                        { saturation: -100 },
                        { lightness: 55 },
                        { visibility: 'on' }
                    ]
                },{
                    featureType: 'poi.park',
                    elementType: 'all',
                    stylers: [
                        { hue: '#d0d0d0' },
                        { saturation: -100 },
                        { lightness: 16 },
                        { visibility: 'on' }
                    ]
                }
            ];

          var mapOptions = {
            mapTypeControlOptions: {
                mapTypeIds: [ 'Styled']
            },
            center: new google.maps.LatLng(37.96112215672197, 23.72348675727846),
            zoom: 16,
            mapTypeId: 'Styled'
          };

          var map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);

          var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });

          map.mapTypes.set('Styled', styledMapType);
        }

        function loadScript() {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
              'callback=initialize';
          document.body.appendChild(script);
        }

        window.onload = loadScript;

Answer 1

你得到了以下内容：

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);

我会一一解释：

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

这会将新的google.maps.Map 类型分配给变量map 到元素ID #map-canvas

var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });

这会为变量 styledMapType 分配一个新的google.maps.StyledMapType，并使用之前声明的样式，最后

map.mapTypes.set('Styled', styledMapType); 

我们再次回调map 变量并使用mapTypes.set 方法将之前赋值中声明的styledMapType 附加到它。

如果您想要在同一个文档中包含多个地图，您首先应该使用 var styledMapType 创建新样式，然后在不同的容器上创建不同的地图，并将每种样式附加到您想要设置样式的每个地图上。

最后你应该有这样的东西：

var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });

var map1 = new google.maps.Map(document.getElementById('map1'), mapOptions);
map1.mapTypes.set('Styled', styledMapType);
var map2 = new google.maps.Map(document.getElementById('map2'), mapOptions);
map2.mapTypes.set('Styled', styledMapType);
var map3 = new google.maps.Map(document.getElementById('map3'), mapOptions); 
// This map uses the standard styling

简单的 HTML 标记

<div id="map1"></div>
<div id="map2"></div>
<div id="map3"></div>

Ta-da，3张地图在同一页面上运行，风格各异。 使用mapOptions作为模板创建不同的设置变量，您还可以为每个地图应用不同的起始位置，因为使用不同的styledMapType可以设置不同的样式：

var mapLondon = new google.maps.Map(document.getElementById('mapLondon'), mapLondonOptions);
mapLondon.mapTypes.set('Styled', styledMapLondon);
var mapNewyork = new google.maps.Map(document.getElementById('mapNewyork'), mapNewyorkOptions);
mapNewyork.mapTypes.set('Styled', styledMapNewyork);