Uzyskaj instancję google.maps.Map z pliku HTMLElement

Question

Mam istniejącą mapę na stronie. Mogę wybrać ten element za pomocą czegoś wzdłuż linii document.getElementById(), aby uzyskać obiekt javascript HTMLElement. Czy można uzyskać instancję google.maps.Map utworzoną podczas inicjowania mapy, tj. Czy jest to właściwość obiektu HTMLElement lub jego prototypu?

Answer 1

Nie można dostać google.maps.Map obiekt z DOM Element, na której Google Maps obiektu zostały skonstruowane. google.maps.Map to tylko opakowanie, które kontroluje DOM Element do przeglądania mapy, a ten element nie ma odniesienia do jego opakowania.

Jeśli problem dotyczy tylko zakresu, należy uczynić map jako właściwość obiektu window i będzie on dostępny z dowolnego miejsca na twojej stronie. Można dokonać 'map' jako globalny za pomocą jednego z nich:

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

lub

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

Answer 2

Utworzenie instancji podczas inicjowania mapy;

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

użyć tego wystąpienia, gdy chcesz zrobić coś jak umieszczenie znacznika, zmieniając lokalizację itp To nie jest przedmiot HTMLElement. Jednak ma on metodę getDiv(), która daje ci element html, na którym działa.

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

Answer 3

miałem podobny problem. Chciałem tylko manipulować mapami po ich utworzeniu. Próbowałem czegoś takiego (myślę, że to też ci pomoże). Stworzyłem funkcję (mniej więcej tak):

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

Funkcja ta działa po wywołaniu jej w celu utworzenia mapy w jakimś pojemniku.

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

Funkcja zwróci obiekt zawierający niektóre dane użyte podczas tworzenia mapy. Po utworzeniu mapy sam mogę po prostu manipulować, w moim przypadku, marker na każdej mapie oddzielnie przy użyciu mapa obiektu, na przykład:

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

to zmieni pozycję markera i centrum mapy do tych samych coords. Zauważ, że wartości lng i lat są inne niż podczas wywoływania funkcji, która tworzy mapę.

Nadzieję, że pomaga.

Answer 4

Możesz dostać obiekt google.maps.Map z DOM Element, z niewielką sztuczką.

Po zainicjowaniu obiektu mapy należy zapisać obiekt na atrybucie danych elementu.

Przykład:

$.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; 
}; 

Po zdefiniowaniu element mapy, np

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

można następnie uzyskać obiekt mapy później za pomocą elementu ID, np

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

Korzystając z tej metody, możesz mieć wiele map z różnymi zachowaniami na stronie.

Answer 5

Jeśli używasz Google map komponent z projektu Polymer, można uzyskać istniejącej mapy Dom tak:

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

Kiedy już, że bieżąca instancja mapy można uzyskać przez:

var currentMapInstance = map.map; 

Answer 6

Za pomocą var map = $("#map_canvas").gmap('get','map') można uzyskać mapę do zmiennej i za pomocą tej zmiennej można zmienić istniejącą mapę.

Pozdrawiam