Google maps API嵌入代码

时间:2017-05-08 21:32:48

标签: javascript html maps

一直在努力在我的谷歌地图上嵌入风格。 我有密钥,只是复制了我想要的风格的代码。遵循每个教程,但似乎无法做到正确。 你们中的任何人可以告诉我哪里错了? 谢谢。

<div id="map"></div>
<script>
  function initMap() {
    var uluru = {lat: 50.0715845, lng: 14.3000891};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      styles: [

{
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
        {
            "hue": "#165c64"
        },
        {
            "saturation": 34
        },
        {
            "lightness": -69
        },
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "landscape",
    "elementType": "geometry",
    "stylers": [
        {
            "hue": "#b7caaa"
        },
        {
            "saturation": -14
        },
        {
            "lightness": -18
        },
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "landscape.man_made",
    "elementType": "all",
    "stylers": [
        {
            "hue": "#cbdac1"
        },
        {
            "saturation": -6
        },
        {
            "lightness": -9
        },
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
        {
            "hue": "#8d9b83"
        },
        {
            "saturation": -89
        },
        {
            "lightness": -12
        },
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
        {
            "hue": "#d4dad0"
        },
        {
            "saturation": -88
        },
        {
            "lightness": 54
        },
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
        {
            "hue": "#bdc5b6"
        },
        {
            "saturation": -89
        },
        {
            "lightness": -3
        },
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "road.local",
    "elementType": "geometry",
    "stylers": [
        {
            "hue": "#bdc5b6"
        },
        {
            "saturation": -89
        },
        {
            "lightness": -26
        },
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
        {
            "hue": "#c17118"
        },
        {
            "saturation": 61
        },
        {
            "lightness": -45
        },
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "poi.park",
    "elementType": "all",
    "stylers": [
        {
            "hue": "#8ba975"
        },
        {
            "saturation": -46
        },
        {
            "lightness": -28
        },
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "transit",
    "elementType": "geometry",
    "stylers": [
        {
            "hue": "#a43218"
        },
        {
            "saturation": 74
        },
        {
            "lightness": -51
        },
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "administrative.province",
    "elementType": "all",
    "stylers": [
        {
            "hue": "#ffffff"
        },
        {
            "saturation": 0
        },
        {
            "lightness": 100
        },
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "administrative.neighborhood",
    "elementType": "all",
    "stylers": [
        {
            "hue": "#ffffff"
        },
        {
            "saturation": 0
        },
        {
            "lightness": 100
        },
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "administrative.locality",
    "elementType": "labels",
    "stylers": [
        {
            "hue": "#ffffff"
        },
        {
            "saturation": 0
        },
        {
            "lightness": 100
        },
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "administrative.land_parcel",
    "elementType": "all",
    "stylers": [
        {
            "hue": "#ffffff"
        },
        {
            "saturation": 0
        },
        {
            "lightness": 100
        },
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "administrative",
    "elementType": "all",
    "stylers": [
        {
            "hue": "#3a3935"
        },
        {
            "saturation": 5
        },
        {
            "lightness": -57
        },
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi.medical",
    "elementType": "geometry",
    "stylers": [
        {
            "hue": "#cba923"
        },
        {
            "saturation": 50
        },
        {
            "lightness": -46
        },
        {
            "visibility": "on"
        }
    ]
}

    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/staticmap?key=Mykeyisherealright&center=-33.9,151.14999999999998&zoom=12&format=png&maptype=roadmap&style=element:geometry%7Ccolor:0x1d2c4d&style=element:labels.text.fill%7Ccolor:0x8ec3b9&style=element:labels.text.stroke%7Ccolor:0x1a3646&style=feature:administrative.country%7Celement:geometry.stroke%7Ccolor:0x4b6878&style=feature:administrative.land_parcel%7Celement:labels%7Cvisibility:off&style=feature:administrative.land_parcel%7Celement:labels.text.fill%7Ccolor:0x64779e&style=feature:administrative.province%7Celement:geometry.stroke%7Ccolor:0x4b6878&style=feature:landscape.man_made%7Celement:geometry.stroke%7Ccolor:0x334e87&style=feature:landscape.natural%7Celement:geometry%7Ccolor:0x023e58&style=feature:poi%7Celement:geometry%7Ccolor:0x283d6a&style=feature:poi%7Celement:labels.text%7Cvisibility:off&style=feature:poi%7Celement:labels.text.fill%7Ccolor:0x6f9ba5&style=feature:poi%7Celement:labels.text.stroke%7Ccolor:0x1d2c4d&style=feature:poi.business%7Cvisibility:off&style=feature:poi.park%7Celement:geometry.fill%7Ccolor:0x023e58&style=feature:poi.park%7Celement:labels.text%7Cvisibility:off&style=feature:poi.park%7Celement:labels.text.fill%7Ccolor:0x3C7680&style=feature:road%7Celement:geometry%7Ccolor:0x304a7d&style=feature:road%7Celement:labels.text.fill%7Ccolor:0x98a5be&style=feature:road%7Celement:labels.text.stroke%7Ccolor:0x1d2c4d&style=feature:road.arterial%7Celement:labels%7Cvisibility:off&style=feature:road.highway%7Celement:geometry%7Ccolor:0x2c6675&style=feature:road.highway%7Celement:geometry.stroke%7Ccolor:0x255763&style=feature:road.highway%7Celement:labels%7Cvisibility:off&style=feature:road.highway%7Celement:labels.text.fill%7Ccolor:0xb0d5ce&style=feature:road.highway%7Celement:labels.text.stroke%7Ccolor:0x023e58&style=feature:road.local%7Cvisibility:off&style=feature:road.local%7Celement:labels%7Cvisibility:off&style=feature:transit%7Celement:labels.text.fill%7Ccolor:0x98a5be&style=feature:transit%7Celement:labels.text.stroke%7Ccolor:0x1d2c4d&style=feature:transit.line%7Celement:geometry.fill%7Ccolor:0x283d6a&style=feature:transit.station%7Celement:geometry%7Ccolor:0x3a4762&style=feature:water%7Celement:geometry%7Ccolor:0x0e1626&style=feature:water%7Celement:labels.text.fill%7Ccolor:0x4e6d70&size=480x360">
</script>
    </div>
    </div>
</div>

0 个答案:

没有答案