谷歌地圖樣式的地圖標記未顯示

Question

我正在嘗試設置向樣式地圖添加標記，但由於某種原因它沒有顯示。 我已經嘗試了我所知道的一切來修復它，但它只是不會顯示。

       (function () {
var map, mapOptions, styledMap, styles, marker, myLatLng;
styles = [
    {
        stylers: [
            { hue: '#00ffe6' },
            { saturation: -20 }
        ]
    },
    {
        featureType: 'road',
        elementType: 'geometry',
        stylers: [
            { lightness: 100 },
            { visibility: 'simplified' }
        ]
    },
    {
        featureType: 'road',
        elementType: 'labels',
        stylers: [{ visibility: 'on' }]
    }
];
myLatlng = new google.maps.LatLng(-33.882895, 151.204266);
styledMap = new google.maps.StyledMapType(styles, { name: 'Styled Map' });
marker = new google.maps.Marker({
    position: myLatlng,
    map: map

  });
mapOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeControlOptions: {
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            'map_style'
        ]
    }
};



map = new google.maps.Map(document.getElementById('map'), mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}.call(this));

有人看到我做錯了什么嗎？ 干杯。

Answer 1

您正在創建地圖之前創建標記（因此map不是google.maps.Map對象）：

var map, mapOptions, styledMap, styles, marker, myLatLng;
marker = new google.maps.Marker({
    position: myLatlng,
    map: map
});
mapOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeControlOptions: {
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            'map_style'
        ]
    }
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);

在地圖之后創建標記或在實例化地圖后設置標記的地圖屬性。

概念證明小提琴

代碼片段：

 (function() { var map, mapOptions, styledMap, styles, marker, myLatLng; styles = [{ stylers: [{ hue: '#00ffe6' }, { saturation: -20 }] }, { featureType: 'road', elementType: 'geometry', stylers: [{ lightness: 100 }, { visibility: 'simplified' }] }, { featureType: 'road', elementType: 'labels', stylers: [{ visibility: 'on' }] }]; myLatlng = new google.maps.LatLng(-33.882895, 151.204266); styledMap = new google.maps.StyledMapType(styles, { name: 'Styled Map' }); mapOptions = { zoom: 15, center: myLatlng, mapTypeControlOptions: { mapTypeIds: [ google.maps.MapTypeId.ROADMAP, 'map_style' ] } }; map = new google.maps.Map(document.getElementById('map'), mapOptions); marker = new google.maps.Marker({ position: myLatlng, map: map }); map.mapTypes.set('map_style', styledMap); map.setMapTypeId('map_style'); }.call(this));

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div>