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>

当我单独尝试每个代码时，每个代码都会给我一个不同的输出，所以第一个代码会给我相同的google教程输出，它有一个城市的地图。第二个代码将给我一个地图，让我获得当前位置，但如果我尝试合并两个它将无法正常工作。

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

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);
    }

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

2 个答案: