Question

以下代码最初是Google Maps 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);

您还会注意到我已将＆＃39; saveData（）＆＃39; 功能附加为按钮中的 onclick事件 我们创建的。

我还修改了 saveData（）功能。如您所见，它接受两个参数： lat 和 lng 。这些参数将替换包含未定义的 getCurrentPosition（）函数的 latlng 。如果您指的是 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 对您的用例非常有帮助。

希望我的回答可以帮助和编码快乐！

保存用户输入和从当前位置谷歌地图API的位置

1 个答案: