检测当前位置并使用网站的预定义位置计算距离

Detect current location & calculate distance with predefined location for website

本文关键字：位置 预定义 计算 距离 网站 检测      更新时间：2023-09-26

我希望浏览器检测到用户的当前位置，并使用文本框或标签中的预定义位置来计算两个地方之间的总距离。这就像任何餐厅列表中的zomato一样。我想知道如何为我的 vb.net 网站执行此操作？请向我建议任何建议此内容的链接。

  • 要获取用户的当前位置，您需要使用地理位置 API。
  • 要从坐标获取当前地址，您需要使用地理编码器 API

要使用谷歌地图和这些API，你必须为谷歌云平台生成一个API密钥。并确保为生成的 API 密钥启用上述 API。

示例代码：

var map, infoWindow;
// initialize a map with given coordinates (call it in HTML!).
function initMap() {
  var egypt = new google.maps.LatLng(26.8206, 30.8025);
  infoWindow = new google.maps.InfoWindow();
  map = new google.maps.Map(document.getElementById('map'), {
    center: egypt,
    zoom: 6,
  });
  getCurrentLocation();
  getCurrentAddress(map, infoWindow, pos);
}
// set Map to current location.
function getCurrentLocation() {
  if (navigator.geolocation) {
    // Browser supports geolocatin (get current location).
    navigator.geolocation.getCurrentPosition(
      function (position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };
        infoWindow.setPosition(pos);
        infoWindow.setContent('You are here.');
        infoWindow.open(map);
        map.setZoom(15);
        map.setCenter(pos);
        getCurrentAddress(map, infoWindow, pos);
      },
      function () {
        handleLocationError(true, infoWindow, map.getCenter());
      }
    );
  } else {
    // Browser doesn't support Geolocation.
    handleLocationError(false, infoWindow, map.getCenter());
  }
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? // ? 'Error: The Geolocation service failed.'
        'Error: Unable to get your current location.'
      : "Error: Your browser doesn't support geolocation."
  );
  infoWindow.open(map);
}
// get current Address from coordinates (pos) using Geocoder API.
function getCurrentAddress(map, infowindow, pos) {
  var geocoder = new google.maps.Geocoder();
  if (geocoder) {
    geocoder.geocode({ latLng: pos }, function (results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        console.log(results[0].formatted_address);
        // create marker at current position.
        const marker = new google.maps.Marker({
          position: pos,
          map: map,
        });
        // open an infoWindow above marker & set its content to current address.
        infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
      } else {
        console.log('Geocoding failed: ' + status);
      }
    });
  }
}

@StupidRomeo 使用地理位置、自定义控件、自动完成 API（可选）、距离矩阵服务。用于尝试定位用户的当前用户的地理位置。这是一个示例请注意，这是在接受用户的位置时知道他/她的位置。Google 地图地理位置 API 根据移动客户端可以检测到的手机信号塔和 WiFi 节点的信息返回位置和精度半径。本文档介绍用于将此数据发送到服务器并向客户端返回响应的协议。带有（自动完成 api）的输入框有助于让用户方便地找到 Google 地图可以找到的正确位置。下面是文档中提供的示例。使用 Google 地方信息接口的自动填充功能来帮助用户填写信息。最后将使用自定义按钮获取两点，并将调用距离矩阵服务距离矩阵服务 API 的示例响应：

"rows": [ {
 "elements": [ {
  "status": "OK",
 "duration": {
 "value": 70778,
 "text": "19 hours 40 mins"
 },
 "distance": {
 "value": 1887508,
 "text": "1173 mi"
 }
 }
相关文章：