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

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

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

如果我可以解决这个问题，那么任何见解都会受到高度赞赏，如果我能解决它的问题，那就不会让GT很好。直到那时我才感到沮丧。

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个有用的latlng，point和pixel转换的访问权限，您需要添加虚拟OverlayView。

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

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

步骤2）渲染地图后，设置这个虚拟/存根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绑定到地图上，只要你需要使用这些转换就可以这样做：

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，但这应该可以帮助你。

Answer 2

感谢您的详细信息。实际上在我的情况下，我无法更改API以使用我需要传递LatLng的tile数字。我找到了这个解决方案......到目前为止它对我有用：

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
     }

Answer 3

它为我工作

我在Google API V3顶部使用了MapBox.Light Style 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();

使用ImageMapType，Tile边界框替换Google Maps v3中的GTileLayer？

3 个答案: