50

我在页面上有一个现有的地图。我可以使用类似于 document.getElementById() 的内容来选择该元素，以获取 HTMLElement javascript 对象。是否可以获得在地图初始化时创建的 google.maps.Map 的实例，即它是 HTMLElement 对象的属性还是在其原型中？

4

5 回答 5

51

您无法从中获取google.maps.Map对象DOM Element，在该对象上构建了 Google Maps 对象。google.maps.Map只是一个包装器，用于控制DOM Element查看地图，并且该元素没有对其包装器的引用。

如果您的问题只是范围，请将其map作为window对象的属性，并且可以从页面中的任何位置访问它。您可以'map'使用以下方法之一将其设为全局：

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

或者

 map = new google.maps.Map(...) //AVOID 'var'
于 2012-04-20T21:21:26.830 回答
27

您可以通过一个小技巧google.maps.Map从 中获取对象。DOM Element

初始化地图对象时，需要将该对象存储在元素的数据属性中。

例子：

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

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

于 2014-11-12T05:07:22.660 回答
6

我有一个类似的问题。我想做的就是在创建地图后对其进行操作。我尝试了类似的方法（我认为它也会对您有所帮助）。我创建了函数（或多或少像这样）：

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

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

希望有帮助。

于 2013-01-16T12:43:51.403 回答
3

初始化地图时创建实例；

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'
于 2012-04-20T20:53:04.453 回答
0

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

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

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

var currentMapInstance = map.map;
于 2015-08-02T18:14:24.563 回答