javascript - 获取访问者的纬度和经度并显示它的谷歌地图

Question

我正在尝试获取访问者的位置，然后使用 map 显示他们的位置。

我尝试将纬度和经度值传递给变量 a 和 b，然后使用它们来显示 map 。

  <p> You are visiting me from:

  <button onclick="getLocation()">Click Here</button>
  </p>
  <p id="geoLoc"></p>

  <script>
    var x = document.getElementById("geoLoc");
    var a = 0;
    var b = 0;

    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
      } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
      }
    }

    function showPosition(position) {
       a = position.coords.latitude;
        b = position.coords.longitude;
      x.innerHTML = "Latitude: " + a +
        "<br>Longitude: " + b;

    }
    function initMap() {
  // The location of visitor
  var uluru = {lat: a, lng: b};
  // The map, centered at visitor
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at visitor
  var marker = new google.maps.Marker({position: uluru, map: map});
}
  </script>
  <h3> Map of Your Location</h3>
  <div id = "map"></div>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </div>

预期:在经纬度传递的位置上看到带有标记的 map

实际:没有

Answer 1

您需要为包含要显示的 map 的 div 定义一个高度，将 style="height: 500px" 添加到属性中就可以了。

当您加载页面时， map 也会被初始化，这将在 (0,0) 处显示一个标记。收到访客的地理位置信息后，需要设置标记的位置。 map 和标记变量需要在函数范围之外定义，然后您可以在 showPosition 函数中设置标记。

<p> You are visiting me from:
<button onclick="getLocation()">Click Here</button>
</p>
<p id="geoLoc"></p>

<script>
  var x = document.getElementById("geoLoc");
  var a = 0;
  var b = 0;
  // Map variables with global scope
  var map;
  var marker;

  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      x.innerHTML = "Geolocation is not supported by this browser.";
    }
  }

  function showPosition(position) {
    a = position.coords.latitude;
    b = position.coords.longitude;
    x.innerHTML = "Latitude: " + a +
    "<br>Longitude: " + b;
    // Position of the visitor
    var uluru = {lat: a, lng: b};
    // The marker, positioned at visitor
    marker = new google.maps.Marker({position: uluru, map: map});
    // Center the map on the new marker position
    map.setCenter(marker.getPosition());
  }

  function initMap() {
    // The map, centered to 0,0
    map = new google.maps.Map(
    document.getElementById('map'), {zoom: 4 , center: {lat: 0, lng: 0}});
  }

</script>
<h3> Map of Your Location</h3>
<!-- Set div height for the map -->
<div id = "map" style="height: 500px;"></div>
  <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
  </script>
</div>