Question

这是我在我的页面中使用的代码，用指针数据库显示地图作为纬度和经度。

此代码显示谷歌地图中显示的正常图像，但是因为我需要灰度地图，所以用谷歌API来获取JSON代码但我很担心，如何用完地图显示的json代码在灰度。

这是我页面中的脚本： - 下面是Google地图的JSON代码

<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" } ] } ]

Answer 1

您正在使用API的第2版，它没有样式化地图。您需要使用版本3来提供该功能。版本3与版本2完全不同。新项目肯定会使用版本3，版本2项目将在2013年5月停止工作。

根据Google rather garish example改编的灰度图：

<!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>

如何使用JSON以灰度图获得此地图？

1 个答案: