一个页面上的多个谷歌地图具有相同的风格

multiple google maps on one page with same style

本文关键字：谷歌地图 风格 一个      更新时间：2023-09-26

我想在一个页面上显示多个谷歌地图。

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

必须添加什么？

我想要其他具有相同样式的地图。

另一个问题是谷歌地图没有加载满

谁能帮我？ 

    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;

你得到了以下内容：

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);
相关文章：