当不硬编码纬度和经度时，谷歌地图上的图钉会消失答案

【问题标题】：Pin on google maps disappears when not hard coding the latitude and longitude当不硬编码纬度和经度时，谷歌地图上的图钉会消失
【发布时间】：2021-06-15 17:44:56
【问题描述】：

我目前正在尝试实现一个谷歌地图，它在 IP 地址来自的地方设置一个 pin。我正在使用 Javascript 中的地理定位工具。

但是，当我对 lat & lng 进行硬编码时，它工作得很好，但是当我尝试获取坐标时，pin 消失了

这是我的有效代码：

<!DOCTYPE html>
<html>
<head>
  <title>Simple Map</title>
  <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
      height: 500px;
      width: 100%;
    }
  </style>
</head>
<body>
<div id="map"></div>

<script>
  function initMap(position) {



    var location = {lat: 51.165691, lng: 10.451526};
    var map = new google.maps.Map(document.getElementById("map"), {
      zoom: 4,
      center: location
    });

    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFlvIBD_3jTrQgDAyj9RMLOdR9cqYZoco&callback=initMap"></script>
</body>
</html>

这是更改后的代码，不再起作用：

<!DOCTYPE html>
<html>
<head>
  <title>Simple Map</title>
  <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
      height: 500px;
      width: 100%;
    }
  </style>
</head>
<body>
<div id="map"></div>

<script>
  function initMap(position) {



    var location = {lat: 51.165691, lng: 10.451526};
    var map = new google.maps.Map(document.getElementById("map"), {
      zoom: 4,
      center: location
    });
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition)
    } else {
      return "Not available";
    }

    var a = position.coords.latitude;
    var b = position.coords.longitude;


    var marker = new google.maps.Marker({
      position: {lat: a, lng: b},
      map: map
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFlvIBD_3jTrQgDAyj9RMLOdR9cqYZoco&callback=initMap"></script>
</body>
</html>

编辑：我被禁止提问，因为我的问题没有被赞成，但得到了回答，并且在 cmets 中进行了一些很好的讨论。但是堆栈交换团队告诉我编辑我的问题以使其更清楚，但他们收到了答案，所以我认为他们很清楚。我不是以英语为母语的人，所以我的英语不是最好的，我无法表达自己那么好。但是他们告诉我编辑它们，使它们看起来像新的并且可以被投票。我不明白为什么这样做是有道理的，但如果我对已经解决的问题获得了一些支持，也许它会解除我的问题禁令，所以如果你不介意，请支持。

【问题讨论】：

position.coords.latitude和position.coords.longitude的值是多少？
是与location变量中的两个数字风格相同的数字

标签： javascript html geolocation

【解决方案1】：

您应该使用成功回调来访问导航器位置，请参阅随附的工作示例：

<!DOCTYPE html>
<html>
<head>
  <title>Simple Map</title>
  <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
      height: 500px;
      width: 100%;
    }
  </style>
</head>
<body>
<div id="map"></div>

<script>
  function initMap(position) {



    var location = {lat: 51.165691, lng: 10.451526};
    var map = new google.maps.Map(document.getElementById("map"), {
      zoom: 4,
      center: location
    });
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(pos){
       var a = pos.coords.latitude;
       var b = pos.coords.longitude;
       var marker = new google.maps.Marker({
         position: {lat: a, lng: b},
         map: map
       });
      });
    } else {
      return "Not available";
    }
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFlvIBD_3jTrQgDAyj9RMLOdR9cqYZoco&callback=initMap"></script>
</body>
</html>

【讨论】：

我刚刚尝试了你的解决方案，但它仍然没有显示标记。我正在尝试解决这个问题 3-4 个小时。f*** :D
也许您需要允许您的浏览器共享位置？
是的，我也这么认为，但这是允许的，而且我以纯文本形式获得坐标.. 但是 pin 不能“使用”然后
上面的代码对我有用，它显示了欧洲的地图，然后它固定了我的位置......