Javascript 将Google Maps v3中的GTileLayer替换为ImageMapType，平铺边界框？

我需要更新此代码：

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
         });

我已经做到了：

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

据我所知，该服务需要瓷砖边界框。然而，ll和ur似乎根本不正确

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

---

这里的任何见解都将非常感谢，如果我能解决这个问题，在V3中没有GTileLayers是很好的，直到那时我才感到沮丧。

我的问题是使用来自同一发布者的更新磁贴服务。它接受更简单的参数：

   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个有用的板条、点和像素转换，您需要添加一个虚拟叠加视图。

步骤1）定义存根，使其与地图和其他变量一起全局可用：

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

步骤2）渲染贴图后，按如下方式设置此虚拟/存根覆盖视图：

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

现在，地图上有了一个功能覆盖视图，无论何时需要使用这些转换，都可以这样做：

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功率有限的移动设备上运行良好。他们已经消除了尽可能多的代码以获得简单的贴图渲染，并且他们希望您在绝对需要的情况下手动连接这些额外的代码

---

如果我有更多的时间，我会写一个sample.html，但这应该可以让你开始了。

谢谢你提供的详细信息。事实上，在我的情况下，我无法更改API以使用我需要通过LatLng的瓷砖编号。 我找到了这个解决方案。。。到目前为止，它对我有效：

var myMapOptions = {
          getTileUrl: function(coord,zoom) { 
            var proj = map.getProjection();
            var zfactor=Math.pow(2,zoom);
            var top=proj.fromPointToLatLng(new google.maps.Point(coord.x*256/zfactor,coord.y*256/zfactor));
            var bot=proj.fromPointToLatLng(new google.maps.Point((coord.x+1)*256/zfactor,(coord.y+1)*256/zfactor));
            url = "/layer/layer_"+zoom+"_"+top.lng().toFixed(6)+"_"+bot.lat().toFixed(6)+"_"+bot.lng().toFixed(6)+"_"+top.lat().toFixed(6)+".png";
        return url; 
       },
      tileSize: new google.maps.Size(256, 256),
      isPng: true,
      opacity: 0.4
     }

这对我有用

我在GoogleAPIv3的顶部使用了MapBox.Light样式的Tileset

function loadMap() {
    // Default the map view to the continental U.S.
    mapOptions = {
      center: new google.maps.LatLng(17.387140, 78.491684),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 8
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    var imageMapType = new google.maps.ImageMapType({
      getTileUrl: function(coord, zoom) {
        return "https://api.mapbox.com/v4/mapbox.light/" +zoom+"/"+coord.x+"/"+coord.y+"@2x.png?access_token=<<access_token>>";

      },
      tileSize: new google.maps.Size(256, 256)
    });

    map.overlayMapTypes.push(imageMapType);        

}

loadMap();

函数加载映射（）{
//默认地图视图为美国大陆。
映射选项={
中心：新google.maps.LatLng（17.387140,78.491684），
mapTypeId:google.maps.mapTypeId.ROADMAP，
缩放：8
};
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
var imageMapType=new google.maps.imageMapType({
getTileUrl:函数（坐标、缩放）{
返回“https://api.mapbox.com/v4/mapbox.light/“+zoom+”/“+coord.x+”/“+coord.y+”@2x.png？访问_令牌=“；
},
tileSize:new google.maps.Size（256256）
});
map.overlyMapTypes.push（imageMapType）；
}
loadMap（）；

感谢您发布这篇文章，效果很好。如果您想知道如何推导这些公式，请查看谷歌地图参考资料，了解瓷砖坐标是如何生成的-