當不硬編碼緯度和經度時，谷歌地圖上的圖釘會消失

Question

我目前正在嘗試實現一塊谷歌地圖，它在 IP 地址來自的地方設置了一個引腳。 我正在使用 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>

編輯：我被禁止提問，因為我的問題沒有被贊成，但得到了回答，並且在評論中進行了一些很好的討論。 但是堆棧交換團隊告訴我編輯我的問題以使其更清楚，但他們收到了答案，所以我認為他們很清楚。 我不是以英語為母語的人，所以我的英語不是最好的，我無法表達自己那么好。 但他們告訴我編輯它們，使它們看起來像新的並且可以被投票。 我不明白為什么這是有道理的，但是如果我對已經解決的問題獲得了一些支持，也許它會解除我的問題禁令，所以如果你不介意，請支持。

Answer 1

您應該使用成功回調來訪問導航器 position，請參見隨附的工作示例：

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

當不硬編碼緯度和經度時，谷歌地圖上的圖釘會消失

問題描述

1 個解決方案

解決方案1
0 已采納 2021-06-15 17:58:12

當不硬編碼緯度和經度時，谷歌地圖上的圖釘會消失

問題描述

1 個解決方案

解決方案1 0 已采納 2021-06-15 17:58:12

解決方案1
0 已采納 2021-06-15 17:58:12