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

您正在使用 API 的第 2 版，它没有样式化的地图。您需要使用版本 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 回答