如何拉取用户的当前位置并显示在谷歌地图 api 上？ [复制]

Question

所以我要完成两件事 1) 拉取用户当前位置 2）然后在谷歌地图上显示它

从我的研究中，我看到我可以使用以下内容来获取用户的当前位置

navigator.geolocation.getCurrentPosition(success);
function success(pos) {
  var crd = pos.coords;
  console.log('Your current position is:');
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);
};

和以下启动谷歌地图

function initMap() {
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }

所以我遇到的问题是如何同时完成两者？ 我试图将第二个函数放在第一个函数中，但这不起作用...... 提前感谢大家的帮助！

Answer 1

initMap 需要知道位置是什么。目前，您在 initMap 中将位置设置为“uluru”；相反，尝试将坐标传递给函数，然后从该对象中拉出坐标（您可以重用该对象，但您必须考虑到字段被称为 longitude/latitude 的事实第一种情况，lng/lat 在第二种情况下）。像这样的：

navigator.geolocation.getCurrentPosition(success);
function success(pos) {
  var crd = pos.coords;
  console.log('Your current position is:');
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);
  initMap(crd);
};

function initMap(coordinates) {
    var location = {'lng': coordinates.longitude, 'lat': coordinates.latitude};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: location
    });
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
}