javascript - Openlayers3 get map from element - Stack Overflow

admin管理员组

文章数量:1287956

Is there a way in Openlayers 3 to get the map that is attached to a specific html element?

Something like:

var map = new ol.Map({
  view: new ol.View({
    center: [0, 0],
    zoom: 1
  }),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'osm'})
    })
  ],
  target: 'map'
});

//Later on, in a different file
var myMap = $("#map").ol.Map()

Is there a way in Openlayers 3 to get the map that is attached to a specific html element?

Something like:

var map = new ol.Map({
  view: new ol.View({
    center: [0, 0],
    zoom: 1
  }),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'osm'})
    })
  ],
  target: 'map'
});

//Later on, in a different file
var myMap = $("#map").ol.Map()

• javascript
• openlayers
• gwt-openlayers

Share Improve this question Follow edited Apr 28, 2015 at 20:40 Wouter van Nifterick 24.1k77 gold badges8181 silver badges123123 bronze badges asked Apr 28, 2015 at 14:17 Tyler DeWittTyler DeWitt 23.6k4040 gold badges123123 silver badges197197 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

The map object has a reference to the HTML element but the HTML element does not have a reference to the map object. The HTML element does not know about the map object at all.

If you use jQuery you could possibly store a reference to the map in the jQuery object using the data method. For example:

var map = new ol.Map({
  target: 'map', 
  //... 
});
$('#map').data('map', map);

And then, to get a reference to the map from the element:

var map = $('#map').data('map');

For clarity, here is another example demonstrating erilem's answer with a map var and map div that are not named 'map'.

mapElement = '#mapDiv'
mymap = new ol.Map({        
  target: mapDiv,
  view: new ol.View({
     ...
  })
});
$(mapElement).data('map', mymap);

Then you can reference that map with jquery using data with the data method. In my case I then wanted to use the ol updateSize() to update mymap.

thisMap = $(mapElement).data('map')
thisMap.updateSize();

This is useful when I have more than one map on a page. Where I use:

mapDiv = id +'-map'      
mapElement = '#' + mapDiv
maps[i] = new ol.Map({        
    target: mapDiv,
    view: new ol.View({
        ...
    })
});
$(mapElement).data('map', maps[i])

And then:

thisMapId = activeDataset + '-map'
thisMapElement = '#' + thisMapId
thisMap = $(thisMapElement).data('map')
thisMap.updateSize()

Where id = activeDataset

本文标签： javascriptOpenlayers3 get map from elementStack Overflow