Javascript 从HtmleElement获取google.maps.Map实例

我在一页上有一张现有地图。我可以使用document.getElementById（）来选择该元素，以获取HtmleElement javascript对象。是否可以在初始化地图时获取创建的google.maps.Map实例，即它是HtmleElement对象的属性还是在其原型中？

初始化地图时创建实例

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

只要您想做一些事情，比如放置标记、更改位置等，就可以使用该实例。它不是HtmleElement对象。但是，它有一个

getDiv（）

方法，该方法提供了它所操作的html元素

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

---

您无法从构建google maps对象的

DOM元素

中获取

google.maps.Map

对象

google.maps.Map

只是一个包装器，它控制查看地图的

DOM元素，而该元素没有对其包装器的引用

如果您的问题只是范围，请将
映射
作为
窗口
对象的属性，这样就可以从页面中的任何位置访问它。您可以使用以下选项之一将
'map'
设置为全局：

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

或

我也有类似的问题。我想做的就是在地图被创建后对其进行操作。我试过类似的方法（我想它也会对你有帮助）。我创建了函数（大致如下）：

此函数的作用是在调用它以在某个容器中创建映射之后

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

函数将返回包含制作地图时使用的一些数据的对象。在创建地图本身之后，我可以简单地使用
mapa
对象分别操纵每个地图上的标记，例如：

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

这会将标记位置和中心地图更改为相同坐标。请注意，
lng
和
lat
值与调用创建映射的函数时不同

希望能有所帮助。
您可以从
DOM元素
获得
google.maps.Map
对象，只需稍加技巧

初始化映射对象时，需要将对象存储在元素的数据属性上

例如：

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

定义贴图元素后，例如：

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

随后，您可以使用元素的ID获取贴图对象，例如：

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

通过使用此方法，您可以在一个页面上拥有多个具有不同行为的地图。
如果您使用的是Polymer项目中的Google map组件，您可以获得如下现有地图Dom：

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

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

一旦您拥有了该功能，可以通过以下方式访问map的当前实例：

var currentMapInstance = map.map;

但是我如何从范围之外到达那个实例呢？就我的问题而言，这张地图是从一行我无法更改的javascript中初始化出来的，看起来像：新的google.maps.map（el，options）；请注意，实例如何没有保存到变量中，是否可以访问该实例？这在事件侦听器中非常有效：
marker.map.getDiv（）
。为什么要避免使用“var”？（在最后一行中）因为“var”将创建一个新的局部变量（例如，如果在函数中使用，当函数返回时，该变量将被丢弃），而不是覆盖一个全局变量（如果存在）。例如，如果您有一个名为
map
的全局变量，并且在任何函数中使用
map='anything'
，则从现在起，全局变量的值将为'anything'。您可以在
页面上有多个具有不同行为的映射。真棒，正是我想要的。你是我的英雄。这假设人们正在使用jQuery。虽然它确实为答案提供了一个解决方案，但它并不是以一种直接的方式实现的。这是一个好的、更模块化的答案，而不是在窗口中公开map变量。
var currentMapInstance = map.map;