我正在尝试将一组样式应用于带有标记的地图。这是基于两个功能性的例子，我正在努力以任何可能的方式结合起来。不用说，我还没有成功。
这是我的想法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px; }
#map_canvas { height: 80% ; width:100%; //*position:(100,0);*//}
#content {}
</style>
<script type="text/javascript"
src="http://maps-api-tt.appspot.com/apilite/styled/apiv3.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.795624, 15.724284);
var settings = {
zoom: 18,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT},
navigationControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
var styles = {
"map_canvas": [
{
featureType: 'all',
rules: [
{ "invert_lightness": true },
{ "weight": 0.5 },
{ "lightness": 5 },
{ "gamma": 1.58 },
{ "saturation": 2 }
]
}
]
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">heading</h1>'+
'<div id="bodyContent">'+
'<p>sample txt</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var companyImage = new google.maps.MarkerImage('images/logoo.png',
new google.maps.Size(337,191),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyShadow = new google.maps.MarkerImage('images/logoo_shadow.png',
new google.maps.Size(337,191),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyPos = new google.maps.LatLng(51.796414, 15.724155);
var companyMarker = new google.maps.Marker({
position: companyPos,
map: map,
icon: companyImage,
shadow: companyShadow,
title:"Kacza Górka Park Sportowy",
zIndex: 3});
var skateImage = new google.maps.MarkerImage('images/skate.png',
new google.maps.Size(100,100),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var skateShadow = new google.maps.MarkerImage('images/skate_shadow.png',
new google.maps.Size(100,100),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var skatePos = new google.maps.LatLng(51.795623, 15.724286);
var skateMarker = new google.maps.Marker({
position: skatePos,
map: map,
icon: skateImage,
shadow: skateShadow,
title:"skate park",
zIndex: 2
});
var parkingImage = new google.maps.MarkerImage('images/parking.png',
new google.maps.Size(50,50),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var parkingShadow = new google.maps.MarkerImage('images/parking_shadow.png',
new google.maps.Size(70,50),
new google.maps.Point(0,0),
new google.maps.Point(60, 50)
);
var parkingPos = new google.maps.LatLng(57.0437, 9.9147);
var parkingMarker = new google.maps.Marker({
position: parkingPos,
map: map,
icon: parkingImage,
shadow: parkingShadow,
title:"Parking Lot",
zIndex: 1
});
google.maps.event.addListener(companyMarker, 'click', function() {
infowindow.open(map,companyMarker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
我现在已经尝试了一段时间，但无法理解，我会感激所有的投入。
答案 0 :(得分：0)
您可以在下面找到样式化地图的简洁示例。当您按“添加一些标记”链接时，地图上会添加新标记。
为了为地图创建新样式，您可以使用Google Style Maps Wizard自动生成JSON对象以传递给MapOptions对象的样式属性，以便将样式应用于Maps API v3 Map。
<!doctype html>
<html lang="en">
<head>
<title>Google Maps</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script type="text/javascript">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177, -89.406738, 2]
],
demoCenter = new google.maps.LatLng(41, -87),
map,
styles = [{
stylers: [{
hue: "#00ffe6"
}, {
saturation: -20
}]
}, {
featureType: "road",
elementType: "geometry",
stylers: [{
lightness: 100
}, {
visibility: "simplified"
}]
}, {
featureType: "road",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}];
function initialize() {
var styledMap = new google.maps.StyledMapType(styles, {
name: "Styled Map"
}),
mapOptions = {
zoom: 7,
center: demoCenter,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
function addMarkers() {
var marker,
i,
infowindow = new google.maps.InfoWindow();
for (i = 0; i < cityList.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
title: cityList[i][0]
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(cityList[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
$(document).ready(function () {
initialize();
});
$(document).on('click', '.add-markers', function (e) {
e.preventDefault();
addMarkers();
});
</script>
</head>
<body>
<div id="basic-map">
<div id="map_canvas" style="height:350px;"></div>
<a href="#" class="add-markers">Add Some Markers</a>
</div>
</body>
</html>
我希望这会有所帮助。