Remplacement de GTileLayer dans Google Maps v3, avec ImageMapType, le Carrelage de la boîte englobante?

La solution dans mon cas était d'utiliser une mise à jour de la tuile de service à partir du même éditeur. Il accepte plus simple supplémentaire:

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

Comme vous pouvez le voir, c'est beaucoup plus facile que le code que j'ai posté dans la description du problème.

Toutefois, si vous lisez encore probablement, vous voulez toujours la réponse pour le problème d'origine, qui est la conversion de latlng de pixels. Ne vous inquiétez pas, j'ai une solution pour que.

Pour accéder à l'4 utile latlng, le point et le pixel conversions, vous devez ajouter un mannequin OverlayView.

Étape 1) Définir le talon de sorte qu'il est disponible dans le monde entier, avec votre carte et d'autres vars:

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

Étape 2) Après le rendu d'une carte, d'installation de ce mannequin/stub OverlayView comme suit:

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

Maintenant vous avez une fonctionnelle OverlayView lié à la carte, toutes les fois que vous besoin d'utiliser ces conversions, vous pouvez le faire comme ceci:

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

Dans mon cas, je vais l'utiliser pour créer des info bulles, voici un extrait de mon événement click:

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

Espère que cela aide quelqu'un d'autre de faire le saut à la V3.

Si vous vous demandez pourquoi nous avoir à sauter à travers les cerceaux de faire quelque chose qui est si simple dans la V2, la réponse est assez évident quand vous pensez à ce sujet. V3 est le programme d'installation pour bien fonctionner sur les appareils mobiles, où la bande passante et de la puissance cpu sont limitées. Ils ont éliminé le plus de code possible pour obtenir le simple cartes de rendu, et ils attendent que vous manuellement fil de ces extras, si vous avez absolument besoin d'eux.

Si j'avais plus de temps je ferais un sample.html mais cela devrait vous aller.

OriginalL'auteur justdev

Il a travaillé pour moi

J'ai utilisé MapBox.Lumière de Style Tileset sur la page de Google API V3

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

OriginalL'auteur durgas09