Kann ich google.map.overlayMapTypes.insertAt() actionListener?

Question

Ich zeichne Raster auf Google Maps mit API.

here is example.

function CoordMapType(tileSize) { 
    this.tileSize = tileSize; 
} 

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) { 
    var div = ownerDocument.createElement('div'); 
    div.innerHTML = coord; 
    div.style.width = this.tileSize.width + 'px'; 
    div.style.height = this.tileSize.height + 'px'; 
    div.style.fontSize = '10'; 
    div.style.borderStyle = 'solid'; 
    div.style.borderWidth = '1px'; 
    div.style.borderColor = '#AAAAAA'; 
    return div; 
}; 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 10, 
    center: {lat: 41.850, lng: -87.650} 
    }); 

    // Insert this overlay map type as the first overlay map type at 
    // position 0. Note that all overlay map types appear on top of 
    // their parent base map. 
    map.overlayMapTypes.insertAt(
     0, new CoordMapType(new google.maps.Size(256, 256))); 
} 

Der obige Code wurde auf dem Kartengitter zeichnen.

Aber ich kann AddActionListener (onclick, mouseover ...) jede Rasterzelle nicht hinzufügen.

Wie kann ichActionListener zur Gitterzelle hinzufügen?

Answer 1

Es ist nicht möglich, einen clickHandler pro Kachel hinzuzufügen. Was würden Sie tun müssen, ist ein wenig Abhilfe:

• eine clickhandler auf der Karte hinzufügen
• bekommen die LatLng der ClickEvent
• die Kartenprojektion verwenden map.getProjection() die Koordinaten zu konvertieren Weltkoordinaten/Punkt Ebene
• Ihre aktuelle Zoomstufe verwenden, um die Pixelkoordinaten pixelCoordinateX = parseInt(worldCoordinateX * Math.pow(2, zoom), 10) (das gleiche für y)
• Teilen Sie das pixelCoordinates durch die Kachelgröße (256 in diesem Fall) zu berechnen: tileNoX = parseInt(pixelCoordinateX/256, 10). Jetzt sollten Sie Ihre Kachel Nummer haben.

Hilft Ihnen das?

Answer 2

Überprüfen Sie das Beispiel, das ich auf gerade erstellt codepen here

Hoffe, es hilft.

Die Umwandlungsmethode ist von Google Beispiel google example, Sie sollten versuchen, eventListener auf dem Kartenobjekt nicht das div-Element hinzuzufügen.

function CoordMapType(tileSize) { 
    this.tileSize = tileSize; 
} 

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) { 
    var div = ownerDocument.createElement('div'); 
    div.innerHTML = coord; 
    div.style.width = this.tileSize.width + 'px'; 
    div.style.height = this.tileSize.height + 'px'; 
    div.style.fontSize = '10'; 
    div.style.borderStyle = 'solid'; 
    div.style.borderWidth = '1px'; 
    div.style.borderColor = '#AAAAAA'; 
    return div; 
}; 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 10, 
    center: {lat: 41.850, lng: -87.650} 
    }); 

    map.addListener('click', function(e) { 
    if(_INFO_WINDOW){ 
     _INFO_WINDOW.close(); 
     _INFO_WINDOW.setMap(null); 
    } 
    var scale = 1 << map.getZoom(); 
    var worldCoordinate = project(e.latLng); 

    var tileCoordinate = new google.maps.Point(
     Math.floor(worldCoordinate.x * scale/TILE_SIZE), 
     Math.floor(worldCoordinate.y * scale/TILE_SIZE)); 

    var content = ''; 
    content += 'lat: ' + e.latLng.lat() + "<br />"; 
    content += 'lng: ' + e.latLng.lng() + "<br />"; 
    content += 'tile Coord: ' + tileCoordinate; 

    _INFO_WINDOW = new google.maps.InfoWindow({ 
     content: content, 
     position: e.latLng, 
     map: map 
    }); 
    }); 

    // Insert this overlay map type as the first overlay map type at 
    // position 0. Note that all overlay map types appear on top of 
    // their parent base map. 
    map.overlayMapTypes.insertAt(
     0, new CoordMapType(new google.maps.Size(256, 256))); 
} 

function project(latLng) { 
    var siny = Math.sin(latLng.lat() * Math.PI/180); 

    // Truncating to 0.9999 effectively limits latitude to 89.189. This is 
    // about a third of a tile past the edge of the world tile. 
    siny = Math.min(Math.max(siny, -0.9999), 0.9999); 

    return new google.maps.Point(
     TILE_SIZE * (0.5 + latLng.lng()/360), 
     TILE_SIZE * (0.5 - Math.log((1 + siny)/(1 - siny))/(4 * Math.PI))); 
} 

var _INFO_WINDOW = null; 
var TILE_SIZE = 256; 

initMap();