var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 1,
center: new google.maps.LatLng(35.137879, -82.836914),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(47.651968, 9.478485),
draggable: true
});
google.maps.event.addListener(myMarker, 'dragend', function (evt) {
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: <div id="lat" data-lat="' + evt.latLng.lat().toFixed(3) + '">' + evt.latLng.lat().toFixed(3) + '</div> Current Lng: <div id="long" data-long="' + evt.latLng.lng().toFixed(3) + '">' + evt.latLng.lng().toFixed(3) + '</div></p>';
});
google.maps.event.addListener(myMarker, 'dragstart', function (evt) {
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
$("#saving").on("click", function() {
console.log($("#lat").data('lat'));
console.log($("#long").data("long"));
});
適切アヤックスは、使用してプラグインajaxformのjqueryのを使用することができます呼び出しますform plugin
これは、データベースと通信するか、将来の必要性のためにjson/xmlファイルに保存するサーバー側のファイルに送信する
HTMLは、jQueryのフォームプラグイン
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 1,
center: new google.maps.LatLng(35.137879, -82.836914),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(47.651968, 9.478485),
draggable: true
});
google.maps.event.addListener(myMarker, 'dragend', function (evt) {
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: <div id="lat" data-lat="' + evt.latLng.lat().toFixed(3) + '">' + evt.latLng.lat().toFixed(3) + '</div> Current Lng: <div id="long" data-long="' + evt.latLng.lng().toFixed(3) + '">' + evt.latLng.lng().toFixed(3) + '</div></p>';
});
google.maps.event.addListener(myMarker, 'dragstart', function (evt) {
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
$("#saving").on("click", function() {
var lat=$("#lat").data("lat");
var long=$("#long").data("long");
$.post("yourserverfile.php/jsp/asp", { lat: lat, long: long } function(data) {
console.log(data);
});
});
クリックでさえとしては、以下の変更 データベースエンジンにブラウザのlocalStorage noneedでそれを格納するために別のコードなしでこの
<body>
<section>
<div id='map_canvas'></div>
<div id="current">Nothing yet...</div>
<button id="saving" type="button">save Me!</button>
</section>
</body>
別のコードのようなものになります
$("#saving").on("click", function() {
var lat=$("#lat").data("lat");
var long=$("#long").data("long");
localStorage.setItem("lat", lat);
localStorage.setItem("long", long);
//to read from local storage use
localStorage.getItem("lat");
localStorage.getItem("long");
});
ここに一般的な例です http://jsfiddle.net/HATEMOVICH/yLfevs0z/1/
何もこのコードはちょうど緯度とlngの座標を取るそれはどこに保存しません。 –
コードを更新しました。コンソールをチェックする必要がありますが、サーバー側で使用している言語を指定する必要がありますので、さらに助けてくれるでしょう。@AaronSterling –
サーバー側のページでもっと助けが必要なだけです:)データベースに保存する前にエスケープするだけのリムーバーですが、データベースを使用することは推奨されません。単純なアプリケーションのようですが、localstorageは古いブラウザーでは機能しない可能性があります。 @AaronSterling –