如何在不点击链接的情况下直接进入地图（点击“显示我的位置”按钮后直接进入地图）？答案

【问题标题】：How to go direct to maps without click the link (direct go to maps after click the button "show my location")?如何在不点击链接的情况下直接进入地图（点击“显示我的位置”按钮后直接进入地图）？
【发布时间】：2021-08-26 14:42:10
【问题描述】：

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

【问题讨论】：

这些标签是怎么回事？唯一相关的是javascript
真正的问题是什么？
我的实际问题是不点击 URL 链接（经纬度）就无法直接进入地图位置页面。为了更多的了解，也许你可以看看我上传的照片。
所以您需要在点击按钮时直接导航到链接？
是的。 @认真的

标签： javascript php onclick geolocation maps

【解决方案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>

【讨论】：