javascript - 用 ImageMapType、Tile 边界框替换 Google Maps v3 中的 GTileLayer？

Question

我需要更新这段代码:

radar_layer.getTileUrl=function(tile,zoom) {

    var llp = new GPoint(tile.x*256,(tile.y+1)*256);
    var urp = new GPoint((tile.x+1)*256,tile.y*256);
    var ll = G_NORMAL_MAP.getProjection().fromPixelToLatLng(llp,zoom);
    var ur = G_NORMAL_MAP.getProjection().fromPixelToLatLng(urp,zoom);
    var dt = new Date();
    var nowtime = dt.getTime();

    var tileurl = "http://demo.remoteservice.com/cgi-bin/serve.cgi?";
        tileurl+="bbox="+ll.lng()+","+ll.lat()+","+ur.lng()+","+ur.lat();
        tileurl+="&width=256&height=256&reaspect=false&cachetime="+nowtime;

    return tileurl;
};

我做到了:

var DemoLayer = new google.maps.ImageMapType({

     getTileUrl: function(coord, zoom) {

     var llp = new google.maps.Point(coord.x*256,(coord.y+1)*256);
     var urp = new google.maps.Point((coord.x+1)*256,coord.y*256);
     var ll = googleMap.getProjection().fromPointToLatLng(llp);
     var ur = googleMap.getProjection().fromPointToLatLng(urp);
     var dt = new Date();
     var nowtime = dt.getTime();

     var tileurl = "http://demo.remoteservice.com/cgi-bin/serve.cgi?";
         tileurl+="bbox="+ll.lng()+","+ll.lat()+","+ur.lng()+","+ur.lat();
  tileurl+="&width=256&height=256&reaspect=false&cachetime="+nowtime;

     return tileurl;

     },
             tileSize: new google.maps.Size(256, 256),
             opacity:1.0,
             isPng: true
         });

具体来说，我需要这部分的帮助:

var llp = new google.maps.Point(coord.x*256,(coord.y+1)*256);
 var urp = new google.maps.Point((coord.x+1)*256,coord.y*256);
 var ll = googleMap.getProjection().fromPointToLatLng(llp);
 var ur = googleMap.getProjection().fromPointToLatLng(urp);

根据我的理解，该服务需要图 block 边界框。但是，ll 和 ur 似乎根本不正确。

我让它工作并在每个图 block 中显示整个 map 边界框，但这当然不是我需要的。

这里的任何见解都将不胜感激，如果我可以解决它，那么在 V3 中没有 GTileLayers 就很好，直到那时我很沮丧。

Answer 1

我的解决方法是使用来自同一发布者的更新磁贴服务。它接受更简单的参数:

   globalfoovar = new google.maps.ImageMapType({
    getTileUrl: function(tile, zoom) {
        return "http://bar.com/" + zoom + "/" + tile.x + "/" + tile.y +".png"; 
    },
    tileSize: new google.maps.Size(256, 256),
    opacity:0.60,
    isPng: true
});

googleMap.overlayMapTypes.push(null); // create empty overlay entry
googleMap.overlayMapTypes.setAt("0",globalfoovar); // set the overlay, 0 index

// if you want to hide the layer later (toggle):
// googleMap.overlayMapTypes.setAt("0",null);

如您所见，这比我在问题描述中发布的代码要简单得多。

但是，如果您仍在阅读，您可能仍想找到原始问题的答案，即将 latlng 转换为像素。别担心，我也有解决方案。

要访问 4 个有用的经纬度、点和像素转换，您需要添加一个虚拟 OverlayView。

第 1 步)定义 stub ，使其与您的 map 和其他变量一起在全局范围内可用:

var googleMap = {}; // global map var
var mapCanvasStub = {}; // map OverlayView var

第 2 步)渲染 map 后，像这样设置这个虚拟/ stub OverlayView:

googleMap = new google.maps.Map($('#mapCanvas')[0]); // google map init

mapCanvasStub = function (map) { this.setMap(map); }  // start building overlay stub
mapCanvasStub.prototype = new google.maps.OverlayView(); 
mapCanvasStub.prototype.draw = function() {}; 
mapCanvasStub = new mapCanvasStub(googleMap); // bin dthe overlay to the map

现在您已经将功能性 OverlayView 绑定(bind)到 map ，无论何时您需要使用这些转换，您都可以这样做:

var projection = mapCanvasStub.getProjection();
var position = projection.fromLatLngToContainerPixel( latLng );
                   // or fromContainerPixelToLatLng()
                   // or fromDivPixelToLatLng()
                   // or fromLatLngToDivPixel()
                   // or fromLatLngToDivPixel()

在我的例子中，我使用它来创建自定义信息气泡，这是我的点击事件的片段:

function customAlertClick(a,b,c) {

    var projection = mapCanvasStub.getProjection();
    var position = projection.fromLatLngToContainerPixel(b);
    var top = (position.y + parseInt($('#mapCanvas').position().top));
    var lft = (position.x + parseInt($('#mapCanvas').position().left));

    // obviously this is an overly simple example
    $('#foo').css('top',top + 'px');
    $('#foo').css('lft',left + 'px');
}

希望这有助于其他任何人跳转到 V3。

如果您想知道为什么我们必须跳过这些额外的环节才能在 V2 中做一些如此简单的事情，那么当您仔细想想时，答案就很明显了。 V3 设置为在带宽和 CPU 功率有限的移动设备上运行良好。他们已经消除了尽可能多的代码以获得简单的 map 渲染，并且如果您绝对需要它们，他们希望您手动连接这些额外的东西。

如果我有更多时间，我会写一个 sample.html 但这应该让你继续。