如果不对纬度和经度进行硬编码，google 地图上的图钉会消失

Question

我目前正在尝试实现一个 Google 地图，它在 IP 地址的来源位置设置一个 pin。我正在使用来自 Javascript.

的地理定位工具

然而，当我对纬度和经度进行硬编码时，它工作得很好，但是当我尝试获取坐标时，图钉消失了

这是我的有效代码：

<!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>

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

Answer 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>

如果不对纬度和经度进行硬编码，google 地图上的图钉会消失

Pin on google maps disappears when not hard coding the latitude and longitude

html

javascript

geolocation