Question

我是APi的新人，我有一个问题。地图显示完美，位置正确......问题是，没有显示标记或锚点。

这是我的'复制在一起'代码：D

我感谢你的每一次帮助

<script src="http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/11/main.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 

    <script>
window.onload = function () {  
var styles = [
{
    featureType: 'landscape',
    elementType: 'all',
    stylers: [
        { hue: '#cccccc' },
        { saturation: -100 },
        { lightness: -10 },
        { visibility: 'off' }
    ]
},{
    featureType: 'water',
    elementType: 'all',
    stylers: [
        { hue: '#efefef' },
        { saturation: -100 },
        { lightness: 74 },
        { visibility: 'on' }
    ]
},{
    featureType: 'road.local',
    elementType: 'all',
    stylers: [
        { hue: '#cccccc' },
        { saturation: -100 },
        { lightness: -20 },
        { visibility: 'simplified' }
    ]
},{
    featureType: 'road.highway',
    elementType: 'all',
    stylers: [
        { hue: '#8fbd2d' },
        { saturation: -38 },
        { lightness: -28 },
        { visibility: 'on' }
    ]
},{
    featureType: 'water',
    elementType: 'all',
    stylers: [

    ]
},{
    featureType: 'poi',
    elementType: 'all',
    stylers: [
        { hue: '#CCCCCC' },
        { saturation: -100 },
        { lightness: 9 },
        { visibility: 'simplified' }
    ]
},{
    featureType: 'transit',
    elementType: 'all',
    stylers: [
        { hue: '#8fbd2d' },
        { saturation: 60 },
        { lightness: 20 },
        { visibility: 'on' }
    ]
}
];
var options = {
mapTypeControlOptions: {
    mapTypeIds: [ 'Styled']
},
center: new google.maps.LatLng(51.218342, 6.775817),
zoom: 16,
mapTypeId: 'Styled'
};
var div = document.getElementById('map');
var map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);}

var marker = new google.maps.Marker();
marker.setPosition(new google.maps.LatLng(51.218342, 6.775817));
marker.setMap(map);


</script>

Answer 1

您的代码中存在语法错误，您应该查看javascript控制台并查看documentation on styled maps。你也有一个计时问题，你正在div之前初始化地图id =＆＃34; map＆＃34;存在。

working example

<script type="text/javascript">
var styles = [
{
    featureType: 'landscape',
    elementType: 'all',
    stylers: [
        { hue: '#cccccc' },
        { saturation: -100 },
        { lightness: -10 },
        { visibility: 'off' }
    ]
},{
    featureType: 'water',
    elementType: 'all',
    stylers: [
        { hue: '#efefef' },
        { saturation: -100 },
        { lightness: 74 },
        { visibility: 'on' }
    ]
},{
    featureType: 'road.local',
    elementType: 'all',
    stylers: [
        { hue: '#cccccc' },
        { saturation: -100 },
        { lightness: -20 },
        { visibility: 'simplified' }
    ]
},{
    featureType: 'road.highway',
    elementType: 'all',
    stylers: [
        { hue: '#8fbd2d' },
        { saturation: -38 },
        { lightness: -28 },
        { visibility: 'on' }
    ]
},{
    featureType: 'water',
    elementType: 'all',
    stylers: [

    ]
},{
    featureType: 'poi',
    elementType: 'all',
    stylers: [
        { hue: '#CCCCCC' },
        { saturation: -100 },
        { lightness: 9 },
        { visibility: 'simplified' }
    ]
},{
    featureType: 'transit',
    elementType: 'all',
    stylers: [
        { hue: '#8fbd2d' },
        { saturation: 60 },
        { lightness: 20 },
        { visibility: 'on' }
    ]
}
];

function initialize() {
  var options = {
      mapTypeControlOptions: {
      mapTypeIds: [ 'Styled']
    },
    center: new google.maps.LatLng(51.218342, 6.775817),
    zoom: 16,
    mapTypeId: 'Styled'
  };
  var div = document.getElementById('map');
  var map = new google.maps.Map(div, options);

  // 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 styledMapType = new google.maps.StyledMapType(styles,
    {name: "Styled"});
  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMapType);
  map.setMapTypeId('map_style');

  var marker = new google.maps.Marker();
  marker.setPosition(new google.maps.LatLng(51.218342, 6.775817));
  marker.setMap(map);
}
google.maps.event.addDomListener(window,'load',initialize);
</script>

Google API v3 Markers，Anchors未显示

1 个答案: