0

これは、私のページで、緯度と経度としてポインタデータベースを使用して地図を表示するために使用しているコードです。

このコードは、グーグルマップで表される通常の画像を表示しますが、グレースケールマップが必要なため、グーグル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" } ] } ]
4

1 に答える 1

1

スタイル付きマップがないバージョン2のAPIを使用しています。その機能を利用可能にするには、バージョン3を使用する必要があります。バージョン3はバージョン2とはかなり異なります。新しいプロジェクトでは必ずバージョン3を使用する必要があり、バージョン2プロジェクトは2013年5月に機能しなくなります。

グーグルのかなり派手な例から適応したグレースケールマップ：

<!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>
于 2012-05-19T11:14:03.283 に答える