如何将标记添加到以下复杂样式贴图中

时间:2013-09-23 18:47:47

标签: google-maps google-maps-api-3

我正在尝试在样式化地图的中心添加标记(下方)。

(抱歉,我无法正确使用语法)。


<!DOCTYPE html>
<html>
<head>
<link href="css/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>

var map;
var TDMP = new google.maps.LatLng(32.896187, -96.768493);

function initialize() 

{var roadAtlasStyles = 
[
    {
    featureType: 'road.highway',
    elementType: 'geometry',
    stylers: [
        { hue: '#355f7d' },
        { saturation: 60 },
        { lightness: -20 }
        ]
    },
    {
    featureType: 'road.arterial',
    elementType: 'all',
    stylers: [
        { hue: '#c0dfdc' },
        { lightness: -40 },
        { saturation: 100 }
        ]
    },
    {
    featureType: 'road.local',
    elementType: 'all',
    stylers: [
        { visibility: 'on' },
        { hue: '#f6ff00' },
        { saturation: 50 },
        { gamma: 0.7 },
        ]
    }
];

var mapOptions = {
zoom: 14,
center: TDMP,
mapTypeControlOptions: {
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
    }
};

map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

var styledMapOptions = {
name: 'US Road Atlas'
};

var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);

map.mapTypes.set('usroadatlas', usRoadMapType);
map.setMapTypeId('usroadatlas');
}


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

</script>

</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

我已经阅读了帖子,并将示例添加到下面的地图中,但标记没有出现。

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

这会在地图的中心放置一个标记:

<!DOCTYPE html>
<html>
<head>
<link href="css/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>

var map;
var TDMP = new google.maps.LatLng(32.896187, -96.768493);

function initialize() 

{var roadAtlasStyles = 
[
    {
    featureType: 'road.highway',
    elementType: 'geometry',
    stylers: [
        { hue: '#355f7d' },
        { saturation: 60 },
        { lightness: -20 }
        ]
    },
    {
    featureType: 'road.arterial',
    elementType: 'all',
    stylers: [
        { hue: '#c0dfdc' },
        { lightness: -40 },
        { saturation: 100 }
        ]
    },
    {
    featureType: 'road.local',
    elementType: 'all',
    stylers: [
        { visibility: 'on' },
        { hue: '#f6ff00' },
        { saturation: 50 },
        { gamma: 0.7 },
        ]
    }
];

var mapOptions = {
zoom: 14,
center: TDMP,
mapTypeControlOptions: {
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
    }
};

map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

var styledMapOptions = {
name: 'US Road Atlas'
};

var marker = new google.maps.Marker({ 
    position: TDMP, 
    map: map, 
    title:"Hello World!" 
});`

var usRoadMapType = new google.maps.StyledMapType(
roadAtlasStyles, styledMapOptions);

map.mapTypes.set('usroadatlas', usRoadMapType);
map.setMapTypeId('usroadatlas');
}


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

</script>

</head>
<body>
<div id="map-canvas"></div>
</body>
</html>