从HTMLElement获取google.maps.Map实例

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

Answer 1

您无法从构buildGoogle地图对象的DOM Element获取google.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

您可以从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'); 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') )); } }); 

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

Answer 3

我有一个类似的问题。 我所要做的就是在创build地图之后操纵地图。 我尝试过这样的事情（我认为这也会对你有帮助）。 我创build了function（或多或less像这样）：

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

这个函数在调用它来在某个容器中创build地图之后做了什么。

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

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

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

这将改变标记位置和中心地图到相同的坐标。 请注意， lng和lat值在调用创build地图的函数时不同。

希望有所帮助。

Answer 4

您在初始化地图时创build一个实例;

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

只要你想做一些事情，比如放置一个标记，改变位置等等，你就可以使用这个实例。它不是一个HTMLElement对象。 但是它有一个getDiv()方法，它可以为你提供正在运行的html元素。

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

Answer 5

如果您使用Polymer项目中的Google地图组件，则可以像这样获取现有地图Dom：

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

一旦你有了，地图的当前实例可以通过以下方式访问：

 var currentMapInstance = map.map; 

Answer 6

通过使用var map = $("#map_canvas").gmap('get','map')可以将地图变成一个variables，通过使用这个variables可以改变现有的地图。

干杯