我已经查看过有关如何更改Google地图上的颜色的Stack Overflow上的一些教程，但这些教程都没有对我有用。我只是希望地图有蓝色。
这是我用于我的地图的Javascript。地图有额外的代码工作，以便它给用户指示（不确定这是否以某种方式干扰）。
此外，尽管听起来很蠢，但我不确定我是否在使用新版Google地图。地图在javascript中以某种方式被调用，但我不知道在哪里，我有点困惑你怎么知道你正在使用新版本的谷歌地图。
请帮忙！
(function () {
function Map(address, desc, title, markerico, spanId) {
var me = this;
this.spanId = spanId;
var latlng = new google.maps.LatLng(0, 0);
var blue = {
stylers: [
{ saturation: 60 },
{ lightness: 20 },
{ hue: '#0000BB'}
]
};
var myOptions = {
styles: blue,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
};
this.map = new google.maps.Map(document.getElementById("map-" + this.spanId), myOptions);
this.contentString = (desc);
this.directionsDisplay = new google.maps.DirectionsRenderer();
this.directionsDisplay.setMap(this.map);
this.directionsDisplay.setPanel(document.getElementById("route-" + this.spanId));
this.marker = new google.maps.Marker({
position: city,
map: this.map,
title: title,
icon: markerico,
animation: google.maps.Animation.DROP
});
var infowindow = new google.maps.InfoWindow({
content: this.contentString
});
google.maps.event.addListener(this.marker, 'click', function () {
infowindow.open(me.map, me.marker);
});
this.directionsService = new google.maps.DirectionsService();
this.geocoder = new google.maps.Geocoder();
var city = address;
this.geocoder.geocode({ 'address': city }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
address = results[0].formatted_address;
me.map.setCenter(results[0].geometry.location);
me.marker.setOptions({
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
if (document.getElementById('start-' + this.spanId)) {
var input = document.getElementById('start-' + this.spanId);
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
input.className = '';
var place = autocomplete.getPlace();
if (!place.geometry) {
input.className = 'notfound';
return;
}
});
}
};
Map.prototype.route = function() {
var me = this;
var radioButtons = document.getElementsByName("travel-" + this.spanId);
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
var selectedMode = radioButtons[i].value;
}
};
var request = {
origin: document.getElementById('start-' + this.spanId).value,
destination: document.getElementById('end-' + this.spanId).value,
travelMode: google.maps.TravelMode[selectedMode]
};
me.directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
me.directionsDisplay.setDirections(result);
} else if (status == google.maps.DirectionsStatus.NOT_FOUND) {
alert("No corresponding geographic location could be found for the specified address. This may be due to a recent address, or incorrect.");
}
});
};
Map.prototype.error = function (e) {
switch (e.code) {
case e.TIMEOUT:
alert('Timeout');
break;
case e.POSITION_UNAVAILABLE:
alert('Position unavailable');
break;
case e.PERMISSION_DENIED:
alert('Permission denied.');
break;
case e.UNKNOWN_ERROR:
alert('Unknown error');
break;
}
};
Map.prototype.geocode = function (l) {
latLng = new google.maps.LatLng(l.lat, l.lng);
var me = this;
me.geocoder.geocode({
'latLng': latLng
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0].formatted_address);
document.getElementById('start-' + me.spanId).value = results[0].formatted_address;
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
};
Map.prototype.initiate_geolocation = function() {
var me = this;
console.log(this, this.spanId);
if (navigator.geolocation) {
// HTML5 GeoLocation
function getLocation(position) {
me.geocode({
"lat": position.coords.latitude,
"lng": position.coords.longitude
});
}
navigator.geolocation.getCurrentPosition(getLocation, this.error);
} else if(typeof google == 'object') { // Google AJAX API fallback GeoLocation
if (google.loader.ClientLocation) {
this.geocode({
"lat": google.loader.ClientLocation.latitude,
"lng": google.loader.ClientLocation.longitude
});
}
}
};
function createMaps() {
var spans = document.getElementsByTagName("SPAN");
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
if (span.className != 'mapgen')
continue ;
var spanId = span.id;
var organisation = span.getAttribute('data-org');
var phone = span.getAttribute('data-phone');
var url = span.getAttribute('data-url');
var fax = span.getAttribute('data-fax');
var title = span.getAttribute('data-title');
var desc = span.getAttribute('data-desc');
var street = span.getAttribute('data-street');
var city = span.getAttribute('data-city');
var state = span.getAttribute('data-state');
var zip = span.getAttribute('data-zip');
var country = span.getAttribute('data-country');
var image = span.getAttribute('data-image');
var markerico = span.getAttribute('data-marker');
var mode = span.getAttribute('data-mode');
var address = '' + street + ',' + city + ',' + country + '.';
var orgid = organisation.replace(/ /g, "-");
if ( mode == "only") {
var htmlmap = '<div class="form-gmaps clearfix" id="form-gmaps-'+spanId+'" >'
+'<input class="end hidden" id="end-'+spanId+'" name="to" readonly="readonly" type="text" value="Los Angeles" />'
+' <div class="contentmap" id="contentmap-'+spanId+'" >'
+' <div class="map" id="map-'+spanId+'" ></div> '
+' </div> '
+'</div>';
document.getElementById(spanId).innerHTML += htmlmap;
} else if (mode == "itinerary") {
var htmlmap = '<div class="form-gmaps clearfix" id="form-gmaps-'+spanId+'" >'
+'<form style="display:block;" id="geoloc-'+spanId+'" name="geoloc" action="" method="post">'
+' <table class="iti" border="0" width="696">'
+' <tbody>'
+' <tr valign="top">'
+' <td align="right" class="o">'
+' <label for="start" class="1-1">Start :</label>'
+' </td>'
+' <td align="left">'
+' <input id="start-'+spanId+'" name="from" class="start n" type="text">'
+' </td>'
+' <td class="annoy" align="left" >'
+' <input type="radio" name="travel-'+spanId+'" value="DRIVING" checked="checked"> Driving'
+' </td>'
+' </tr>'
+' <tr>'
+' <td align="left" class="th">'
+' <label for="end">End :</label>'
+' </td>'
+' <td>'
+' <input class="end" id="end-'+spanId+'" name="to" readonly="readonly" class="n" type="text" value="'+address+'">'
+' </td>'
+' <td class="f fy" >'
+' <input class="get" id="iti-'+spanId+'" type="button" value="Directions">'
+' </td>'
+' <td class="annoy2" align="left" >'
+' <input type="radio" name="travel-'+spanId+'" value="WALKING" > Walking'
+' </td>'
+' </tr>'
+' </tbody>'
+' </table>'
+'</form>'
+'<div class="contentmap" id="contentmap-'+spanId+'" >'
+' <div id="map-'+spanId+'" class="map"></div> '
+' <div id="route-'+spanId+'">'
+' </div>'
+' </div> '
+'</div>';
document.getElementById(spanId).innerHTML += htmlmap;
}
var desctot = '<div id="hcard-'+orgid+'" class="vcard">'
+'<div class="org" style=\"font-family:sans-serif;\">'
+' <b>'+organisation+'</b>'
+'</div>'
+'<hr>'
+'<span style=\"font-size:12px;line-height:20px;font-family:sans-serif;\">'
+' <b>Url : </b>'
+' <a class="url fn n" href="'+url+'" title="'+title+'">'+title+'</a>'
+' <br />'
+' <b>Description : </b>'
+' '+desc+'<br />'
+' <b style="display:inline-block;">Address : </b>'
+' <div class="adr" style="display:inline-block;">'
+' <div class="street-address" style="display:inline-block;"> '+street+'</div>, <span class="locality">'+city+'</span> , <span class="locality">'+state+'</span> , <span class="locality">'+zip+'</span> , <span class="country-name">'+country+'</span>.'
+' </div>'
+' <br />'
+' <b>Phone : </b>'
+' <div class="tel" style="display:inline-block;">'+phone+'</div>'
+' <br />'
+' <b>Fax : </b>'
+' <div class="tel" style="display:inline-block;">'+fax+'</div>'
+' <br />'
+' <div class="img-shop">'
+' <img src="'+image+'" height="50" width="300"> '
+' </div>'
+' </span>'
+'</div>';
var map = new Map(address, desctot, title, markerico, spanId);
if (mode == "itinerary") {
var tmap = map; // Create a copy of map in tmap to use in onclick callback
document.getElementById('iti-'+spanId+'').onclick = function () { tmap.route() };
document.getElementById('geo-'+spanId+'').onclick = function () { tmap.initiate_geolocation() };
}
}
};
google.maps.event.addDomListener(window, 'load', createMaps);
}
)();
答案 0 :(得分：0)
您必须在地图选项中添加styles对象：
var blue = [
{
featureType: "all",
stylers: [
{ saturation: 60 },
{ lightness: 20 },
{ hue: '#0000BB'}
]
}
];
hue会改变颜色。您必须使用这些参数，直到找到所需的蓝色。
您可以将颜色应用于地图选项：
var mapOptions = {
styles: blue
}
并将它们分配到您的地图：
var map = new google.maps.Map(document.getElementById("map-" + this.spanId)), mapOptions);
更多信息可在https://developers.google.com/maps/documentation/javascript/styling#stylers
找到