如何更改 map object 中的属性目标的值

Question

i would like to know how to set value fot a the target property of the map. in the below posted code,i would like to change the target property to, for example to mapTest instead of map. to achieve that, i did the following:

#mapTest {
    width: 800px;
    height: 550px;
  }
</style>
    <div id="mapTest"></div>
    <script src="./index.js"></script>

and changed the target as follows accordingly:

    target: 'mapTest',

but then the code does not display anything please let me know how to change the target property of the map object correctly

app.component.html :

    <div class="MousePosition">
  <div id="mouse-position"></div>
</div>
<form>
  <label for="projection">Projection </label>
  <select id="projection">
    <option value="EPSG:4326">EPSG:4326</option>
    <option value="EPSG:3857">EPSG:3857</option>
  </select>
  <label for="precision">Precision</label>
  <input id="precision" type="number" min="0" max="12" value="4"/>
</form>
<style>
  #map {//<---i want to change this
    width: 800px;
    height: 550px;
  }
</style>
    <div id="map"></div>
    <script src="./index.js"></script>

app.component.ts :

ngOnInit() {
this. map = new Map({
controls: defaultControls().extend([mousePositionControl]),
target: 'map',//<---i want to change this
layers: [
  new TileLayer({
    source: new XYZSource({
      url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
    })
  })
],
view: new View({
  center: [0, 0],
  zoom: 0
})
});
 }

Answer 1

Ok, so I'm not sure what the exact problem is but here are some pointers, Map class has a method setTarget where you can change the target property but you also need to trigger render method as well so it will render the map in a new element container, it should look something like this:

onSomeEvent() {
    this.map.setTarget('mapTest');
    this.map.render();
}

On a sidenote, there is a whitespace in this. map this. map between a dot and map, hope that's not in your actual code.