从当前位置保存用户输入和位置 Google 地图 API

Question

下面是最初用于将用户定义的数据保存到数据库中的 Google 地图 API 代码，但我对其进行了调整以在用户位置标记中加载表单。现在保存功能没有帮助。请帮忙

注册为放债人。

细胞： 企业名称： 抵押品：+ 笔记本电脑、手机、电视。 工资支持贷款 开放谈判 数量
可用：+ 低于 K3000 超过K3000

<div id="message">You have been registered as a money lender at this location.</div>
<script>

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


  function initMap() {
    var zambia = {lat: -15.376085, lng: 28.366237};
    map = new google.maps.Map(document.getElementById('map'), {
      center: zambia,
      zoom: 7
    });
var infoWindow = new google.maps.InfoWindow;

       if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude



        };


        infoWindow.setPosition(pos);
        infoWindow.setContent(document.getElementById('form'));
        infoWindow.open(map);
        map.setCenter(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 ?
                          'We cant seem to find you my friend.' :
                          'Your browser doesn\'t support geolocation.');
    infoWindow.open(map);
  }



   function saveData() {
    var name = escape(document.getElementById('name').value);
    var address = escape(document.getElementById('address').value);
     var collateral = document.getElementById('collateral').value;
    var type = document.getElementById('type').value;
    var latlng = getCurrentPosition(pos);

    var url = 'phpsqlinfo_addrow.php?name=' + name + '&address=' + address + '&collateral=' + collateral + 
              '&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 () {
  }

</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>

Answer 1

我试图复制您的确切问题，但失败了。所以我所做的就是稍微修改你的代码，以便我可以进一步调查。

根据我的调查，您的某些代码行似乎可能无法正常工作。

喜欢这条线：infoWindow.setContent(document.getElementById('form'));。我相信这条线不会像你期望的那样工作。我更愿意建议的是，创建一个包含 html 标记的 js 变量 - 准确地说是表单元素，并将其设置为 Google Maps Javascript API InfoWindow 的内容。

您可以查看下面的代码以了解我在说什么：

var template = '<form>';
template += '<input id="name" type="text" placeholder="name" /><br/>';
template += '<input id="address" type="text" placeholder="address" /><br/>';
template += '<input id="collateral" type="text" placeholder="collateral" /><br/>';
template += '<input id="type" type="text" placeholder="type" /><br/>';
template += '<button onclick="saveData('+position.coords.latitude+','+position.coords.longitude+');">Add my location</button>';
template += '</form>';
infoWindow.setContent(template);

您还会注意到，我已将 'saveData()' 函数作为 onclick 事件 附加到我们创建的 button 中。

我还修改了您的 saveData() 函数。如您所见，它接受两个参数：lat 和 lng。这些参数将替换您的 latlng 包含未定义的 getCurrentPosition() 函数。如果你指的是HTML5 Geolocation getCurrentPosition方法，恐怕不是正确的实现方式。

新的 saveData() 函数如下所示：

function saveData(lat,lng) {     
    var pos = {
        lat : lat,
        lng : lng
    }
    var name = escape(document.getElementById('name').value);
    var address = escape(document.getElementById('address').value);
    var collateral = document.getElementById('collateral').value;
    var type = document.getElementById('type').value;
    var url = 'phpsqlinfo_addrow.php?name=' + name + '&address=' + address + '&collateral=' + collateral + 
              '&type=' + type + '&lat=' + pos.lat + '&lng=' + pos.lng;
    downloadUrl(url, function(data, responseCode) {

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

检查 From Info Windows to a Database: Saving User-Added Form Data 对您的用例非常有帮助。

希望我的回答能帮到你，祝你编码愉快！