Question

我想知道是否可以在使用自定义图块渲染地图的primefaces中创建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);

但我不知道如何在primefaces中做到这一点。

如果不可能，您是否知道如何通过javascript修改GMap组件来替换getTileUrl？

修改

正如Duncan注意到上面的代码是v2（我的原始代码是v3，但是非常混乱，所以我从互联网上获取了第一个工作片段而没有检查版本......），完整的v3代码应该如下所示： / p>

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

以下是我正在寻找的完整工作代码：

<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具有widgetVar属性，您可以在gmap中获取javascript：

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

在primefaces GMap组件中的自定义图块

修改

2 个答案: