-1

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

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

必须添加什么？

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

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

谁能帮我？

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

1 回答 1

0

你得到了以下内容：

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

这为变量分配了元素 IDmap的新类型google.maps.Map#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);
于 2013-08-27T14:20:37.313 回答