web-dev-qa-db-fra.com

Obtenir l'instance google.maps.Map à partir d'un objet HTMLElement

J'ai une carte existante sur une page. Je peux sélectionner cet élément en utilisant quelque chose du type document.getElementById () pour obtenir l'objet javascript HTMLElement. Est-il possible de créer l’instance de google.maps.Map lors de l’initialisation de la carte, c’est-à-dire une propriété de l’objet HTMLElement ou de son prototype?

javascriptgoogle-mapsgoogle-maps-api-3
37
Olly Hicks

Vous ne pouvez pas obtenir l'objet google.maps.Map à partir de DOM Element, sur lequel les objets Google Maps ont été construits. google.maps.Map est juste un wrapper, qui contrôle DOM Element pour afficher la carte, et cet élément ne fait pas référence à son wrapper. 

Si votre problème concerne uniquement l'étendue, définissez map en tant que propriété de l'objet window et il sera accessible de partout dans votre page. Vous pouvez rendre 'map' en tant que global en utilisant l’une de ces méthodes:

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

ou

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

Vous pouvez obtenir l'objet google.maps.Map à partir de DOM Element, avec une légère astuce.

Lorsque vous initialisez un objet de la carte, vous devez stocker l'objet sur l'attribut de données de l'élément.

Exemple:

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

Après avoir défini un élément de la carte, par exemple:

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

vous pouvez ensuite obtenir l'objet de la carte plus tard en utilisant l'ID de l'élément, par exemple:

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

En utilisant cette méthode, vous pouvez avoir plusieurs cartes avec des comportements différents sur une page.

22
goldsky

J'avais un problème similaire. Tout ce que je voulais faire était de manipuler les cartes après leur création. J'ai essayé quelque chose comme ça (je pense que ça vous aidera aussi). J'ai créé une fonction (plus ou moins comme ça):

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

Après avoir appelé cette fonction, cette fonction crée une carte dans un conteneur.

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

Function retournera un objet contenant certaines données utilisées lors de la création de la carte. Après avoir créé une carte, je peux simplement manipuler, dans mon cas, des marqueurs distincts sur chaque carte en utilisant un objet mapa, par exemple:

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

Cela modifiera la position du marqueur et centrera la carte sur les mêmes coordonnées. Notez que les valeurs lng et lat sont différentes, alors que vous appelez une fonction qui crée une carte.

J'espère que cela pourra aider.

5
ThePueblo

Vous créez une instance lorsque vous initialisez une carte.

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

Vous utilisez cette instance chaque fois que vous souhaitez faire quelque chose comme mettre un marqueur, changer d'emplacement, etc. Ce n'est pas un objet HTMLElement. Cependant, il a une méthode getDiv(), qui vous donne l'élément html sur lequel il opère.

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

Si vous utilisez le composant Google-map du projet Polymer, vous pouvez obtenir le fichier Dom Map existant comme suit:

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

Une fois que vous avez cela, l'instance actuelle de la carte peut être consultée par:

var currentMapInstance = map.map;
0
Naveed Ul Islam