primefaces GMap组件中的自定义图块

Question

I'm wondering if it is possible to create a GMap component in primefaces which use custom tiles to render the map. 我想知道是否有可能在使用自定义图块渲染地图的素面中创建GMap组件。 I know how to do it in pure javascript ( http://econym.org.uk/gmap/example_custommap1.htm ): 我知道如何使用纯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);

But I have no idea how to do it in primefaces. 但是我不知道该怎么做。

If it is not possible, do you know maybe how the GMap component should be modified by javascript to replace getTileUrl? 如果不可能，您是否知道应该如何用javascript修改GMap组件以替换getTileUrl？

Edit 编辑

As Duncan noticed the code above is v2 (my original code is v3, but is really messy, so I took the first working snippet from Internet without checking the version...), the full v3 code should look like: 正如Duncan注意到，上面的代码是v2（我的原始代码是v3，但是确实很乱，所以我从Internet上获取了第一个有效的代码段，而没有检查版本...），完整的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>

Answer 1

And here is the full working code that I was looking for: 这是我一直在寻找的完整工作代码：

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

Answer 2

Primefaces's gmap has widgetVar attribute, you can get gmap in javascript by it: Primefaces's gmap具有widgetVar属性，您可以通过它在javascript获取gmap ：

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

Note: Primefaces use API v3. 注意： Primefaces使用API v3。

primefaces GMap组件中的自定义图块

问题描述

Edit 编辑

2 个解决方案

解决方案1
1 已采纳 2013-05-05 14:39:32

解决方案2
0 2013-05-03 13:52:47

primefaces GMap组件中的自定义图块

问题描述

Edit 编辑

2 个解决方案

解决方案1 1 已采纳 2013-05-05 14:39:32

解决方案2 0 2013-05-03 13:52:47

解决方案1
1 已采纳 2013-05-05 14:39:32

解决方案2
0 2013-05-03 13:52:47