如何不点击link直接跳转地图（点击"show my location"按钮直接跳转地图）？

Question

1.这是javascript文件 ''' 单击按钮显示我的位置后如何直接转到地图 '''

function geoFindMe() {

  const status = document.querySelector('#status');
  const mapLink = document.querySelector('#map-link');

  mapLink.href = '';
  mapLink.textContent = '';

  function success(position) {
    const latitude  = position.coords.latitude;
    const longitude = position.coords.longitude;

    status.textContent = '';
    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
  }

  function error() {
    status.textContent = 'Unable to retrieve your location';
  }

  if(!navigator.geolocation) {
    status.textContent = 'Geolocation is not supported by your browser';
  } else {
    status.textContent = 'Locating…';
    navigator.geolocation.getCurrentPosition(success, error);
  }

}

document.querySelector('#find-me').addEventListener('click', geoFindMe);

<html lang="en">
<head>
<meta charset= "UTF-8" />
<meta name="viewport" content="width=device-width, initial-"
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<h1> TEST </h1>

<p> Hello! </p>
<button id = "find-me">Show my location</button><br/>
<p id = "status"></p>
<a id = "map-link" target="_blank"></a>

2. **This is HTML file**

照片

Main page before click the button

After click the button After click the link

Answer 1

这将重定向到单击按钮时的位置。

function geoFindMe() {

  const status = document.querySelector('#status');
  const mapLink = document.querySelector('#map-link');

  mapLink.href = '';
  mapLink.textContent = '';

  function success(position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;

    status.textContent = '';
    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
    location.href = "https://www.openstreetmap.org/#map=18/${latitude}/${longitude}";
  }

  function error() {
    status.textContent = 'Unable to retrieve your location';
  }

  if (!navigator.geolocation) {
    status.textContent = 'Geolocation is not supported by your browser';
  } else {
    status.textContent = 'Locating…';
    navigator.geolocation.getCurrentPosition(success, error);
  }

}

document.querySelector('#find-me').addEventListener('click', geoFindMe);

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-" <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <h1> TEST </h1>

  <p> Hello! </p>
  <button id="find-me">Show my location</button><br />
  <p id="status"></p>
  <a id="map-link" target="_blank"></a>
</body>

</html>

如何不点击link直接跳转地图（点击"show my location"按钮直接跳转地图）？

How to go direct to maps without click the link (direct go to maps after click the button "show my location")?

javascript

php

maps

onclick

geolocation