如何动态获取用户位置并将其设置为谷歌地图？

Question

我有一个谷歌地图，我有一个半径为 5 公里的位置标记，我想把这个标记放在地图上，用户从哪里访问页面，它与静态经纬度很好，但给出动态值错误

var Circle = null;
var Radius = $("#radius").val();
var infoWindow = '';
$prevlatitude = $("#latitude").val();
$prevlongitude = $("#longitude").val();
var StartPosition = new google.maps.LatLng(28.62694276371995, 100.201416015625);

function DrawCircle(Map, Center, Radius) {
  if (Circle != null) {
    Circle.setMap(null);
  }
  if (Radius > 0) {
    Radius *= 5;
    Circle = new google.maps.Circle({
      center: Center,
      radius: Radius,
      strokeColor: "#0000FF",
      strokeOpacity: 0.35,
      strokeWeight: 2,
      fillColor: "#0000FF",
      fillOpacity: 0.20,
      map: Map
    });
  }
}

function SetPosition(Location, Viewport) {
  Marker.setPosition(Location);
  if (Viewport) {
    Map.fitBounds(Viewport);
    Map.setZoom(map.getZoom() + 1);
  } else {
    Map.panTo(Location);
  }
  Radius = $("#radius").val();
  DrawCircle(Map, Location, Radius);
  $("#latitude").val(Location.lat());
  $("#longitude").val(Location.lng());
  $("input[name=gtag],input[name=space_location],input[name=tag_location],input[name=location],input[name=locations]").val($("#latitude").val() + ";" + $("#longitude").val());
}
var MapOptions = {
  zoom: 14,
  center: StartPosition,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false,
  disableDoubleClickZoom: true,
  streetViewControl: false
};

var MapView = $("#map");
var Map = new google.maps.Map(MapView.get(0), MapOptions);

// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
Map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

Map.addListener('bounds_changed', function() {
  searchBox.setBounds(Map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();
  if (places.length == 0) {
    return;
  }
  // For each place, get the icon, name and location.
  var bounds = new google.maps.LatLngBounds();
  places.forEach(function(place) {
    if (!place.geometry) {
      console.log("Returned place contains no geometry");
      return;
    }
    var NewPosition = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
    //get_lat=place.geometry.location.lat();
    //get_long=place.geometry.location.lng();
    markers.forEach(function(marker) {
      marker.setMap(null);
    });
    var Marker = new google.maps.Marker({
      position: NewPosition,
      map: Map,
      title: "Drag Me",
      draggable: true
    });
    markers.push(Marker);

    google.maps.event.addListener(Marker, "dragend", function(event) {
      SetPosition(Marker.position);
    });

    $("#radius").keyup(function() {
      google.maps.event.trigger(Marker, "dragend");
    });

    DrawCircle(Map, NewPosition, Radius);
    SetPosition(Marker.position);

    if (place.geometry.viewport) {
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });

  Map.fitBounds(bounds);
});

var Marker = new google.maps.Marker({
  position: StartPosition,
  map: Map,
  title: "Drag Me",
  draggable: true
});
markers.push(Marker);

google.maps.event.addListener(Marker, "dragend", function(event) {
  SetPosition(Marker.position);
});

$("#radius").keyup(function() {
  google.maps.event.trigger(Marker, "dragend");
});

DrawCircle(Map, StartPosition, Radius);
SetPosition(Marker.position);
});

if (navigator.geolocation) {
  var StartPosition = '';
  navigator.geolocation.getCurrentPosition(function(position) {
    var pos = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };
    StartPosition = new google.maps.LatLng(parseFloat(position.coords.latitude), parseFloat(position.coords.longitude5));
  });
}

第二个是我改变动态纬度，然后它说

"Uncaught TypeError: Cannot read property 'lat' of undefined"

Answer 1

您的StartPosition 变量正在返回undefined，因为JavaScript 不会等待getCurrentPosition() 的完整执行，因此您正在使用未定义的位置初始化地图和标记。您应该始终考虑 JavaScript 的执行顺序，否则您会遇到像这样的范围问题。

看看下面修改后的jsfiddle：https://jsfiddle.net/yh7x96ce/

以下修改/新代码：

  // map
  var MapOptions = {
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    disableDoubleClickZoom: true,
    streetViewControl: false
  };
  var MapView = $("#map");
  var Map = new google.maps.Map(MapView.get(0), MapOptions);

  // marker
  var markers = [];
  var Marker = new google.maps.Marker({
    map: Map,
    title: "Drag Me",
    draggable: true
  });
  markers.push(Marker);

  // set position for map and marker
  var defaultPosition = new google.maps.LatLng(28.7041, 77.1025);
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(data) {
      var userPos = new google.maps.LatLng(data.coords.latitude, data.coords.longitude);
      Map.setCenter(userPos);
      Marker.setPosition(userPos);
    }, function() {
      Map.setCenter(defaultPosition);
      Marker.setPosition(defaultPosition);
    });
  } else {
    Map.setCenter(defaultPosition);
    Marker.setPosition(defaultPosition);
  }

一旦调用了getCurrentPosition()，您就会注意到我的代码如何使用Map.setCenter() 和Marker.setPosition()。两个实例都必须放在上面。

编辑：要包含最初的 Circle，请参阅此小提琴：https://jsfiddle.net/dopa4rqy/

  // set position for map and marker
  var defaultPosition = new google.maps.LatLng(28.7041, 77.1025);
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(data) {
      var userPos = new google.maps.LatLng(data.coords.latitude, data.coords.longitude);
      SetPosition(userPos);
    }, function() {
      SetPosition(defaultPosition);
    });
  } else {
     SetPosition(defaultPosition);
  }

这只是实现地理定位的一种方法，代码需要重构，但我希望它对你有所帮助。