OpenLayers：编辑坐标只需在 div 中单击以更改值（使地图居中）

Question

I woudlike to center my map just by click on my coordinates. This coordinates will be editable and after that change the value of center (view of my Map). I'm looking a way to do that:

html:

<div id="mouse-position" class="mouse-position"></div>

js:

    var mouse_position = document.getElementById('mouse-position').addEventListener('click');
    var coord_centre;
    var mousePositionControl = new MousePosition({
      coordinateFormat: createStringXY(4),
      projection: 'EPSG:3857',
      // comment the following two lines to have the mouse position
      // be placed within the map.
      className: 'custom-mouse-position',
      target: document.getElementById('mouse-position'),
      undefinedHTML: ' '
    });
    var map = new Map({
      interactions: defaultInteractions().extend([dragAndDropInteraction]),
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          })
        }),
        coucheWMS
      ],
      target: 'map',
      controls: allcontrol({
        attributionOptions: false
      }).extend([mousePositionControl]),
      view: new View({
        center: coord_centre, // Value of mouse_position ? 
        zoom: 5
      })

Answer 1

You need to:

1. take the user input
2. parse it and if necessary convert to the required projection
3. use either view.setCenter(..) or view.animate(..) to move the map to that location.

Using the control created by MousePosition will be quite tricky, as that control does not and was not intended to have an input. I suspect it will also be confusing to the user.

Here is an example which uses a new input box:
https://stackblitz.com/edit/ol-center-on-entered-coordinates?file=index.js
Enter a value ie: '45,1' then tab or enter, the map will change to that location.

If you really want to see the current coordinates and be able to enter coordinates in the same control, you will probably need to implement the mouse/center position detection yourself using map events, and then update the custom input with the relevant values.