如何让谷歌地图 api 获取用户的当前位置并将其存储在数据库中？

Question

我已经实现了一个关于如何让用户在地图上选择位置并将其存储在数据库中的教程，来自google maps API。

但是，似乎有一个我无法解决的问题，地图没有获取用户的当前位置，它只提供了要在代码中定义的给定坐标。例如本教程定义了加利福尼亚的地图坐标：

var map;
      var marker;
      var infowindow;
      var messagewindow;

      function initMap() {
        var california = {lat: 37.4419, lng: -122.1419};
        map = new google.maps.Map(document.getElementById('map'), {
          center: california,
          zoom: 13
        });

        infowindow = new google.maps.InfoWindow({
          content: document.getElementById('form')
        });

        messagewindow = new google.maps.InfoWindow({
          content: document.getElementById('message')
        });

        google.maps.event.addListener(map, 'click', function(event) {
          marker = new google.maps.Marker({
            position: event.latLng,
            map: map
          });


          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
          });
        });
      }

      function saveData() {
        var name = escape(document.getElementById('name').value);
        var address = escape(document.getElementById('address').value);
        var type = document.getElementById('type').value;
        var latlng = marker.getPosition();
        var url = 'phpsqlinfo_addrow.php?name=' + name + '&address=' + address +
                  '&type=' + type + '&lat=' + latlng.lat() + '&lng=' + latlng.lng();

        downloadUrl(url, function(data, responseCode) {

          if (responseCode == 200 && data.length <= 1) {
            infowindow.close();
            messagewindow.open(map, marker);
          }
        });
      }

      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request.responseText, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing () {
      }

上面的代码将只显示代码中定义的坐标的地图

代码的 HTML 是：

<div id="map" height="460px" width="100%"></div>
    <div id="form">
      <table>
      <tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>
      <tr><td>Address:</td> <td><input type='text' id='address'/> </td> </tr>
      <tr><td>Type:</td> <td><select id='type'> +
                 <option value='bar' SELECTED>bar</option>
                 <option value='restaurant'>restaurant</option>
                 </select> </td></tr>
                 <tr><td></td><td><input type='button' value='Save' onclick='saveData()'/></td></tr>
      </table>
    </div>
    <div id="message">Location saved</div>

我试图用以下函数替换它，该函数获取当前位置，但没有成功，当我运行代码时，代码停止向我显示地图：

 if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (p) {
        var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
        var mapOptions = {
            center: LatLng,
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP

        };


        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        var marker = new google.maps.Marker({
            position: LatLng,
            map: map,
            title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
        });
        google.maps.event.addListener(marker, "click", function (e) {
            var infoWindow = new google.maps.InfoWindow();
            infoWindow.setContent(marker.title);
            infoWindow.open(map, marker);
        });
    });
} else {
    alert('Geo Location feature is not supported in this browser.');
}

此代码的 HTML 将是：<div id="dvMap" style="width: 400px; height: 300px"></div>

当然还有 API 源代码：

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOURAPI">
    </script>

当我分别尝试每个代码时，每个代码都会给我不同的输出，所以第一个代码会给我与谷歌教程相同的输出，其中包含城市地图。第二个代码会给我一张地图，让我知道当前的位置，但如果我试图合并两者，它将不起作用。

有人可以告诉我如何让地图在谷歌地图教程中以相同的方式运行，以及使地图直接到达用户位置的功能，这样他就可以轻松存储它而不是在地图中寻找它整个城市或国家？

Answer 1

您的代码包含几个问题，我不会在这里更正。

在 initMap() 函数的末尾添加它，它将使地图以您的位置为中心，而不会更改您的第一个脚本的任何其他功能。

if (navigator.geolocation) {

  navigator.geolocation.getCurrentPosition(function(p) {
    var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);

    // Set the map center on user location
    map.setCenter(LatLng);
  });

} else {
  alert('Geo Location feature is not supported in this browser.');
}

Answer 2

试试看：

   var options = {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
    };

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error, options);
    } else {
        alert('Geo Location feature is not supported in this browser.');
    }

    function success(p) {
        var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
        var mapOptions = {
            center: LatLng,
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP

        };


        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        var marker = new google.maps.Marker({
            position: LatLng,
            map: map,
            title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
        });
        google.maps.event.addListener(marker, "click", function (e) {
            var infoWindow = new google.maps.InfoWindow();
            infoWindow.setContent(marker.title);
            infoWindow.open(map, marker);
        });
    }

    function error(err) {
        alert('ERROR(' + err.code + '): ' + err.message);
    }