2012-05-19 4 views
0

Это код, который я использую на своей странице для отображения карт с базой данных указателей в виде широты и долготы.Как получить эту карту в оттенках серого с помощью JSON?

Этот код отображает нормальное изображение, представленное на картах google. Но поскольку мне нужна карта в градациях серого, она обрабатывается с помощью google api и получает код JSON, но Im беспокоит, как использовать код json, который содержит карту отображается в оттенках серого.

Это сценарий присутствует в моей странице: - ниже это код JSON от Google Карты

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAfJRXkzFVohAp-Okxjr5B7xR_ljEFASla9K2hAbTooXc5TaM12hShF8opt9JtUXJpFbuViIHs05-CNg" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
//<![CDATA[ 
$(document).ready(function(){ 
    if (GBrowserIsCompatible()) { 
     var latitude = <?php echo $store_details->latitude; ?>; 
     var longitude = <?php echo $store_details->longitude; ?>;         
     var map = new GMap2(document.getElementById("map")); 
     map.setCenter(new GLatLng(latitude,longitude),13);   
     var marker = new GMarker(new GLatLng(latitude,longitude)); 
     map.addOverlay(marker); 

    } 
}); 
//]]> 
</script> 

Это код JSON:

[ { stylers: [ { saturation: -100 }, { visibility: "on" } ] } ] 

ответ

1

Вы используете версии 2 API, который не имеет стилизованных карт. Для обеспечения доступности этой функции вам необходимо использовать версию 3. Версия 3 сильно отличается от версии 2. Новых проектов обязательно должен использовать версии 3 и версию 2 проекта перестанет работать в мае 2013 года

Greyscale карта адаптировано из rather garish example Google:

<!DOCTYPE html> 
<html> 
<head> 
<title>Google Maps JavaScript API v3 Example: Styled MapTypes</title> 
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script> 

var map; 
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455); 

var MY_MAPTYPE_ID = 'Greyscale'; 

function initialize() { 

    var graystyle = [ 
    { 
     featureType: "all", 
     elementType: "all", 
     stylers: [ { saturation: -100 }, { visibility: "on" } ] 
    } 
    ]; 

    var mapOptions = { 
    zoom: 12, 
    center: brooklyn, 
    mapTypeControlOptions: { 
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] 
    }, 
    mapTypeId: MY_MAPTYPE_ID 
    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), 
     mapOptions); 

    var styledMapOptions = { 
    name: "Greyscale" 
    }; 

    var grayMapType = new google.maps.StyledMapType(graystyle, styledMapOptions); 

    map.mapTypes.set(MY_MAPTYPE_ID, grayMapType); 
} 
</script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width: 640px; height: 480px;"></div> 
</body> 
</html>