Question

我希望浏览器检测用户的当前位置，并使用文本框或标签中的预定义位置来计算两个位置之间的总距离。它就像任何餐馆列表中的zomato节目。我想知道如何为我的vb.net网站做这件事？请建议我任何暗示这一点的链接。

Answer 1

要获取用户的当前位置，您需要使用Geolocation API。
要从坐标获取当前地址，您需要使用Geocoder API

要使用Google Maps和这些API，您必须为generate an API Key使用Google Cloud Platform。并确保为生成的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);
      }
    });
  }
}

Answer 2

@StupidRomeo使用地理位置，自定义控件，自动完成API（可选），距离矩阵服务。用于尝试定位用户当前用户的地理位置。这是一个example注意，这是在接受用户的他/她的位置已知。 Google Maps Geolocation API根据有关移动客户端可以检测到的手机信号塔和WiFi节点的信息返回位置和准确度半径。本文档描述了用于将此数据发送到服务器并将响应返回给客户端的协议。带有（autocomplete api）的输入框有助于让用户轻松找到Google地图可以找到的正确位置。以下是document中提供的示例。使用Google Places API的自动填充功能来帮助用户填写信息。然后最后使用自定义button获取两个点并调用Distance Matrix Service 距离矩阵服务API的示例响应：

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

检测当前位置＆amp;计算网站预定义位置的距离

2 个答案: