How to place the zoom control inside another div in openlayers 3?

Question

I have a div laying on top of an ol3-map in which I'd like to place my zoom control. In ol2 this was fairly easy to do, but I haven't found this option in ol3 yet.

Here's an unsuccesful attempt using the ol2-methodology, applied to ol3.

map = new ol.Map({
  layers: [bingMapsRoad, layerBiomass],
  target: 'map',
  view: new ol.View({
    projection: 'EPSG:4326',
    center: [1,16.7],
    zoom: 8
  }),
  controls: ([])  //initialize without controls
});

var external_control = new ol.control.Zoom({
  div: document.getElementById('external_control') });
map.addControl(external_control);

Unfortunately this code results in the zoom control still being placed on the map instead of inside the div.

Answer 1

轻松：

var external_control = new ol.control.Zoom({
  target: document.getElementById('external_control') });
map.addControl(external_control);

只需看看the docs！