Question

我是这个论坛的新手，目前对此风格化Google地图有疑问。它没有出现应有的情况。

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

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

Answer 1

你有两个错误。

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

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

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

程式化的Google地图不会出现？

1 个答案: