Исправление в моем случае состояло в том, чтобы использовать обновленный сервис листов от того же издателя. Он принимает более простые параметры:
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);
Как видите, это намного проще, чем код, который я разместил в описании проблемы.
Однако, если вы все еще читаете, вы, вероятно, по-прежнему хотите получить ответ на исходную проблему, которая заключается в преобразовании латль в пиксели. Не беспокойся, у меня тоже есть решение.
Чтобы получить доступ к 4 полезным преобразованиям латлинга, точки и пикселя, вам нужно добавить фиктивный 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 настроен для работы на мобильных устройствах, где пропускная способность и мощность процессора ограничены. Они убрали как можно больше кода, чтобы получить простой рендеринг карт, и ожидают, что вы вручную подключите эти дополнения, если они вам абсолютно необходимы.
Если бы у меня было больше времени, я бы написал sample.html, но это должно помочь вам.