【问题标题】:Geo location Google Places API javascript地理位置 Google Places API javascript
【发布时间】:2018-08-01 02:33:42
【问题描述】:

以下代码使用 Google Places API 显示我所在位置附近的条形图。但是,如果用户单击不允许浏览器警告“使用您的位置”,则不会加载地图。我想要的是地图在 else 语句中默认为伦敦坐标。

var temp_lat = '';
var temp_lng = '';
var map;
var infowindow;
getLocation();

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    temp_lat = 51.507222; //set default lat value
    temp_lng = -0.1275; //set default lng value
  }
}

function showPosition(position) {
  temp_lat = position.coords.latitude;
  temp_lng = position.coords.longitude;
  initMap();
}


function initMap() {
  var location = {
    lat: temp_lat,
    lng: temp_lng
  };
  map = new google.maps.Map(document.getElementById('map'), {
    center: location,
    zoom: 15
  });
  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
      location: location,
      radius: 50000,
      keyword: ['bar']
    },
    callback);
}

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

【问题讨论】:

  • 代码现在在小提琴上更新以反映帖子中的代码。我知道问题出在哪里,但是,我的 javascript 生锈了,所以很难修复。基本上 showPostion 函数将设置坐标然后初始化地图。如果地理定位被取消,即错误,则永远不会设置纬度和经度,并且在地图可以被输入之前它将失败。我需要在 showPostion 函数中使用某种布尔值,但不知道从哪里开始。
  • 地理位置getCurrentPosition是一个异步函数。这意味着返回职位可能需要一些时间。你为什么不反过来做呢?首先,创建您的地图并将其设置为您的默认位置(伦敦),然后,如果地理位置有效,则使用 map.setCenter() 将您的地图更新为用户位置。

标签: javascript google-maps-api-3 google-places-api google-geolocation


【解决方案1】:

我已经设法让代码正常工作 - 我添加了一个 showError 函数并在用户点击拒绝时调用它,它设置默认坐标然后初始化地图。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-10-07
    • 2020-05-11
    • 1970-01-01
    • 2015-09-19
    • 2013-09-09
    相关资源
    最近更新 更多