現在の場所からユーザー入力と場所を保存するGoogleマップAPI

Question

以下は、ユーザー定義のデータをDBに保存するためのGoogleマップAPIですが、ユーザーの場所マーカーにフォームを読み込むために調整しました。今はsave関数が役に立たない。助けてください

マネー貸し手として登録してください。

セル： ビジネス
名前： 担保：+ ラップトップ、携帯電話、テレビ。
可能な交渉 額について 給与担保ローン オープン：+ 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の内容としてこれを設定することです。あなたはまた、私はのonclickイベントのように「SaveDataを（）」機能を添付しましたことに気づくでしょう

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（）機能を改訂しました。ご覧のとおり、2つの引数：緯度とlngを受け取ります。これらの引数は、定義されていないgetCurrentPosition（）関数を含むlatlngを置き換えます。 HTML5 Geolocation getCurrentPositionメソッドを参照している場合は、それを実装する正しい方法ではないかと思います。

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をチェックするご利用の場合には非常に参考になる：ここで

は新しいSaveDataを（）関数は次のようになります。

私の答えが役に立って幸せなコーディングになることを願っています！