Google地图样式的地图标记未显示

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

在地图之后创建标记，或者在实例化地图后设置标记的地图属性。

proof of concept fiddle

代码段

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