1

我是这个论坛的新手，目前对这个风格化的谷歌地图有疑问。它没有按应有的方式出现。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_OWN_KEY&sensor=false"></script> 
<script type="text/javascript">
    function initialize() {

        // Create an array of styles.
        var styleArray = [
            {
                "featureType": "water",
                "stylers": [
                  { "saturation": -100 },
                  { "lightness": -32 }
                ]
            },{
                "featureType": "road",
                "stylers": [
                  { "saturation": -100 }
                ]
            },{
                "featureType": "landscape.natural.landcover",
                "stylers": [
                  { "saturation": -100 },
                  { "lightness": 63 }
                ]
            },{
                "featureType": "poi",
                "stylers": [
                  { "lightness": 4 },
                  { "saturation": -100 }
                ]
            }
        ]

        // Create a new StyledMapType object, passing it the array of styles,
        // as well as the name to be displayed on the map type control.
        var styledMap = new google.maps.StyledMapType(styles,
            {name: "Styled Map"});

        // Create a map object, and include the MapTypeId to add
        // to the map type control.
        var mapOptions = {
            zoom: 17,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
            }
        };

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

        //Associate the styled map with the MapTypeId and set it to display.
        map.mapTypes.set('map_style', styledMap);
        map.setMapTypeId('map_style');
    }
</script>

HTML如下：

<div id="map" style="width: 100%; height: 500px"></div>

希望这里的大师可以帮助我。非常感谢。

4

1 回答 1

0

你这里有两个错误。

您没有initialize()在任何地方调用，因此您的 JavaScript 代码都不会运行。在脚本末尾添加这一行：

google.maps.event.addDomListener( window, 'load', initialize );

修复该问题后，在打开开发人员工具的情况下加载页面，您将看到一个styles未定义的错误，因为您将数组命名为styleArray。更改一个或另一个以匹配，您的地图将加载！

于 2013-04-06T09:22:16.217 回答