通过 GeoLocation API 在 JavaScript 中获取用户当前位置答案

【问题标题】：Get users current location in JavaScript, via the GeoLocation API通过 GeoLocation API 在 JavaScript 中获取用户当前位置
【发布时间】：2018-03-16 21:43:01
【问题描述】：

实际上我想获取用户的当前位置以跟踪其移动，在 Asp.Net 网络应用程序中是否可以？因为我需要每秒或连续跟踪它。我做了一个代码，它在本地主机上给了我纬度和经度，但在 IP 地址上却没有，为什么？它在地图上给出错误“出了点问题”。代码如下标题部分

 <head runat="server">
<title></title>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor"></script>
  <script type="text/javascript">
    function setText(val, e) {
     document.getElementById(e).value = val;
         }
    function insertText(val, e) {
document.getElementById(e).value += val;
  }

   var nav = null; 
 function requestPosition() {
    if (nav == null) {
  nav = window.navigator;
    }
   if (nav != null) {
  var geoloc = nav.geolocation;
  if (geoloc != null) {
      geoloc.getCurrentPosition(successCallback);
  }
  else {
      alert("geolocation not supported");
  }
 }
else {
  alert("Navigator not found");
   }
   }
 function successCallback(position)
  {
   setText(position.coords.latitude, "latitude");
   setText(position.coords.longitude, "longitude");
   var latlng = new google.maps.LatLng(position.coords.latitude, 
   position.coords.latitude);
   var myOptions = {
   zoom: 8,
         center: latlng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     };
   var map = new google.maps.Map(document.getElementById("map"), myOptions);
   var marker = new google.maps.Marker
    (
    {
    position: new google.maps.LatLng(position.coords.latitude, 
    position.coords.longitude),
    map: map,
    title: 'Click me'
    }
     );
     }
    </script>
    </head>

现在正文部分是

     <body>
     <label for="latitude">Latitude: </label><input id="latitude" /> <br />
     <label for="longitude">Longitude: </label><input id="longitude" /> <br />
     <input type="button" onclick="requestPosition()" value="Get Latitude and Longitude"  /> 
      <div id="map" style="width:400px;height:400px">
            </div>

       </body>

【问题讨论】：

这是 JavaScript 代码，不是 C# 和 ASP.NET。
@krlzlx 我编辑了标签。但是你能指导我如何处理吗？
从未做过，但我猜它需要的代码不止几行！

标签： javascript c# html asp.net google-maps

【解决方案1】：

Mozilla 的 MDN 网络有一个很好的示例来解决您的问题：https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation

这在 JSFiddle (https://jsfiddle.net/api/mdn/) 中对我来说很好用，但在下面的 StackOverflow 代码 sn-p 中却不行（至少在最新版本的 Chrome 中）。这可能是有关 GeoLocation API 的跨源策略的问题。

function geoFindMe() {
  var output = document.getElementById("out");

  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

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

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

    var img = new Image();
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=true";

    output.appendChild(img);
  }

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  }

  output.innerHTML = "<p>Locating…</p>";

  navigator.geolocation.getCurrentPosition(success, error);
}

body {
  padding: 20px;
  background-color:#ffffc9
}

p { margin : 0; }

<p><button onclick="geoFindMe()">Show my location</button></p>
<div id="out"></div>

【讨论】：

现在我的代码在添加 GoogleApi Key 后在 localhost 上也可以正常工作，但是当我将它移动到域（实时）时它不起作用
这个问题好像很像：stackoverflow.com/a/19740416/2147110