webentwicklung-frage-antwort-db.com.de

Holen Sie sich die google.maps.Map-Instanz von einem HTMLElement

Ich habe eine vorhandene Karte auf einer Seite. Ich kann dieses Element mit etwas entlang der Zeilen von document.getElementById () auswählen, um das HTMLElement-JavaScript-Objekt zu erhalten. Kann die Instanz von google.maps.Map erstellt werden, wenn die Karte initialisiert wird, d. H. Ist sie eine Eigenschaft des HTMLElement-Objekts oder eines Prototyps?

37
Olly Hicks

google.maps.Map object kann nicht von DOM Element abgerufen werden, auf dem ein Google Maps-Objekt erstellt wurde. google.maps.Map ist nur ein Wrapper, der DOM Element zum Anzeigen der Karte steuert, und dieses Element hat keinen Verweis auf seinen Wrapper. 

Wenn Ihr Problem nur im Bereich liegt, müssen Sie map als Eigenschaft des window-Objekts festlegen, und Sie können von überall auf Ihrer Seite darauf zugreifen. Sie können 'map' als global definieren, indem Sie eine der folgenden Optionen verwenden:

 window.map = new google.maps.Map(..) 

oder

 map = new google.maps.Map(...) //AVOID 'var' 
44
Engineer

Sie können google.maps.Map Objekt mit einem kleinen Trick von DOM Element erhalten.

Wenn Sie das Kartenobjekt initialisieren, müssen Sie das Objekt im Datenattribut des Elements speichern.

Beispiel:

$.fn.googleMap = function (options) {
    var _this = this;

    var settings = $.extend({}, {
        zoom: 5,
        centerLat: 0,
        centerLon: 0
    }, options);

    this.initialize = function () {
        var mapOptions = {
            zoom: settings.zoom
        };

        var map = new google.maps.Map(_this.get(0), mapOptions);
        // do anything with your map object here,
        // eg: centering map, adding markers' events

        /********************************************
         * This is the trick!
         * set map object to element's data attribute
         ********************************************/
        _this.data('map', map);

        return _this;
    };
    // ... more methods

    return this;
};

Nachdem Sie ein Kartenelement definiert haben, z. B .:

var mapCanvas = $('#map-canvas');
var map = mapCanvas.googleMap({
    zoom: 5,
    centerLat: 0,
    centerLong: 0
});
// ... add some pre-load initiation here, eg: add some markers
// then initialize map
map.initialize();

sie können das Kartenobjekt später mit der Element-ID abrufen, z. B .:

var mapCanvas = $('#map-canvas');
$('.location').on('click', function () {
    // google map takes time to load, so it's better to get
    // the data after map is rendered completely
    var map = mapCanvas.data("map");
    if (map) {
        map.panTo(new google.maps.LatLng(
            $(this).data('latitude'),
            $(this).data('longitude')
            ));
    }
});

Wenn Sie diese Methode verwenden, können Sie mehrere Karten mit unterschiedlichen Verhaltensweisen auf einer Seite haben.

22
goldsky

Ich hatte ein ähnliches Problem. Alles, was ich wollte, war, Karten nach der Erstellung zu manipulieren. Ich habe so etwas ausprobiert (ich denke, es wird auch Ihnen helfen). Ich habe eine Funktion erstellt (mehr oder weniger so):

function load_map(el_id, lat, lng) {
  var point = new google.maps.LatLng(lat,lng);
  var myMapOptions = {
    scrollwheel:false,
    zoom: 15,
    center: point,
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      position: google.maps.ControlPosition.RIGHT_TOP
    },
    navigationControl: true,
    navigationControlOptions: {
      style: google.maps.NavigationControlStyle.SMALL,
      position: google.maps.ControlPosition.LEFT_CENTER
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById(el_id),myMapOptions);
  var marker = new google.maps.Marker({
    draggable:true,
    map: map,
    position: point
  });
  return({
    container:map.getDiv(),
    marker:marker,
    mapa:map
  });
}

Diese Funktion führt nach dem Aufruf eine Karte in einem Container aus.

var mapa = load_map('mapa_container', 53.779845, 20.485712);

Die Funktion gibt ein Objekt zurück, das einige Daten enthält, die beim Erstellen der Karte verwendet wurden. Nachdem ich eine Map selbst erstellt habe, kann ich sie in jedem Fall einfach mit dem mapa-Objekt separat markieren, z. B .:

mapa.marker.setPosition(new google.maps.LatLng(20,30));
mapa.mapa.setCenter(new google.maps.LatLng(20,30));

Dadurch werden die Markierungsposition und die Kartenmitte in die gleichen Koordinaten geändert. Beachten Sie, dass die Werte von lng und lat anders sind als beim Aufrufen einer Funktion, die eine Map erstellt.

Hoffentlich hilft das.

5
ThePueblo

Sie erstellen eine Instanz, wenn Sie eine Karte initialisieren.

var map = new google.maps.Map(document.getElementById("map_element"), options);

Sie verwenden diese Instanz immer dann, wenn Sie beispielsweise eine Markierung setzen, den Standort ändern usw. möchten. Es hat jedoch eine getDiv()-Methode, die Ihnen das HTML-Element gibt, mit dem es arbeitet.

map.getDiv(); // in this case it returns the element with the id 'map_element'
1
keune

Wenn Sie eine Google-Map-Komponente aus dem Polymer-Projekt verwenden, können Sie den vorhandenen Map-Dom wie folgt erhalten:

var map = document.querySelector('google-map');

Sobald Sie das haben, können Sie auf die aktuelle Instanz der Karte zugreifen:

var currentMapInstance = map.map;
0
Naveed Ul Islam