1

カスタムタイルを使用してマップをレンダリングするプライムフェイスで GMap コンポーネントを作成できるかどうか疑問に思っています。純粋なjavascript（ http://econym.org.uk/gmap/example_custommap1.htm ）でそれを行う方法を知っています：

var map = new GMap(document.getElementById("map"));
map.addControl(new GScaleControl());
var copyright = new GCopyright(1,new GLatLngBounds(new GLatLng(53.8136257,-3.0981445),new GLatLng(53.8654855,-2.9663944) ),14, "Ordnance Survey");
var copyrightCollection = new GCopyrightCollection('Map Data:');
copyrightCollection.addCopyright(copyright);

CustomGetTileUrl=function(a,b){
   return "tiles/"+a.x+"_"+a.y+".jpg"
}
var tilelayers = [new GTileLayer(copyrightCollection,14,14)];
tilelayers[0].getTileUrl = CustomGetTileUrl;
var custommap = new GMapType(tilelayers, new GMercatorProjection(15), "Old OS");
map.addMapType(custommap);

map.setCenter(new GLatLng(53.852,-3.038), 14, custommap);

しかし、プライムフェイスでそれを行う方法がわかりません。

それが不可能な場合、GMap コンポーネントを javascript で変更して getTileUrl を置き換える方法をご存知ですか?

編集

上記のコードが v2 であることに Duncan が気付いたように (私の元のコードは v3 ですが、非常に面倒なので、バージョンを確認せずにインターネットから最初の作業スニペットを取得しました...)、完全な v3 コードは次のようになります。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions= {
            center : new  google.maps.LatLng(0,0),
            rotateControl : true,
            panControl : true,
            zoom : 2,
            streetViewControl : false,
            mapTypeControlOptions : {
                mapTypeIds : ['cv0']
            }
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        var option = {
            getTileUrl : function(coord, zoom) {
                var tileRange = 15;
                if (coord.y < 0 || coord.y >= tileRange || coord.x < 0 || coord.x >= tileRange) {
                    return null;
                }
                var addr = "../map_images/new7778069575062411171/5/" + coord.x + "," + coord.y + ".PNG";
                return addr;
            },
            tileSize : new google.maps.Size(256,256),
            maxZoom : 2,
            minZoom : 2,
            name : "title"
        };
        map.mapTypes.set('cv0', new google.maps.ImageMapType(option));
        map.setMapTypeId('cv0');
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>
4

2 に答える 2

1

そして、ここに私が探していた完全な作業コードがあります:

<h:head>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  <script type="text/javascript">
//<![CDATA[

function test(){
    var zzz = gmtls.getMap();
    var option = {
        getTileUrl : function(coord, zoom) {
            var tileRange = 15;
            if (coord.y < 0 || coord.y >= tileRange || coord.x < 0 || coord.x >= tileRange) {
                return null;
            }
            var addr = "../map_images/new7778069575062411171/5/" + coord.x + "," + coord.y + ".PNG";
            return addr;
        },
        tileSize : new google.maps.Size(256,256),
        maxZoom : 2,
        minZoom : 2,
        radius : 360,
        name : "title"
    };
    cvMapType = new google.maps.ImageMapType(option);
    zzz.mapTypes.set('cv0', cvMapType);
    zzz.setMapTypeId('cv0');
}
//]]>

    </script>
</h:head>
<h:body onload="test();">
    <center>
        <h:form>  
            <p:gmap widgetVar="gmtls" center="41.381542, 2.122893" zoom="15" type="hybrid" 
                        style="width:600px;height:400px" />
        </h:form>  
    </center>
</h:body>
于 2013-05-05T14:39:32.153 に答える
0

Primefaces's gmap属性があり、それでwidgetVar入ることができます：gmapjavascript

<h:head>
    <script src="http://maps.google.com/maps/api/js?sensor=true" 
    type="text/javascript"></script>
    <script type="text/javascript">
        function test(){
            var zzz = gmtls.getMap();                   
        }
    </script>
</h:head>
<h:body onload="test();">
  <h:form id="description"> 
    <p:gmap widgetVar="gmtls" center="41.381542, 2.122893" zoom="15" type="hybrid" 
                        style="width:600px;height:400px" />                
  </h:form>
</h:body>

注: Primefaces は API v3 を使用します。

于 2013-05-03T13:52:47.090 に答える