从HTMLElement获取google.maps.Map实例

Question

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

Answer 1

你不能得到DOM Elementgoogle.maps.Map对象，在其谷歌地图对象已建成。 google.maps.Map只是一个包装，它控制着DOM Element查看地图，并且该元素没有引用其包装。

如果您的问题只是范围，请将map作为window对象的属性，并且可以从您网页的任何地方访问它。您可以使用其中的一个做'map'全球：

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

或

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

Answer 2

您在初始化地图时创建实例;

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

每当你想要做的事就像把一个标记，改变位置等，这不是一个HTML元素的对象可以使用该实例。不过，它有一个getDiv()方法，它为您提供了运行的html元素。

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

Answer 3

我也有类似的问题。我想要做的就是在创建地图后操作地图。我尝试过这样的事情（我认为它也会帮助你）。我创建功能（或多或少是这样）：

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

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

希望有所帮助。

Answer 4

您可以从DOM Element获得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'); 
$('.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') 
      )); 
    } 
}); 

：

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，例如，获得地图对象后面上

通过使用此方法，您可以在页面上使用具有不同行为的多个贴图。

Answer 5

如果您正在使用谷歌地图组件从聚合物项目，就可以得到现有地图大教堂这样的：

：

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

一旦你的是，地图的当前实例可以通过访问

var currentMapInstance = map.map; 

Answer 6

通过使用var map = $("#map_canvas").gmap('get','map')可以得到地图划分为可变的，由使用该变量可以改变现有的地图。

干杯