在Google地图上更改颜色

Question

我已经查看了有关如何更改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); 
} 
)(); 

Answer 1

你有一个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