Google map api save visit history

divに保存したいマーカーで選択します。たとえば、私は場所lat = 35 lng = 41を選択します。私はこの場所を保存したい。後で別の場所を選ぶ。それから私は部門に保存したい。ここでは代わりにconsole.log使用の後、私の例ここでは、調整コードの下http://jsfiddle.net/kjy112/QvNUFあなたはjqueryの最初をロードする必要がGoogle map api save visit history

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: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</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);

出典

2016-04-28 Fatih Doğan

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/

出典

2016-04-28 20:06:04

何もこのコードはちょうど緯度とlngの座標を取るそれはどこに保存しません。 –

コードを更新しました。コンソールをチェックする必要がありますが、サーバー側で使用している言語を指定する必要がありますので、さらに助けてくれるでしょう。@AaronSterling –

サーバー側のページでもっと助けが必要なだけです:)データベースに保存する前にエスケープするだけのリムーバーですが、データベースを使用することは推奨されません。単純なアプリケーションのようですが、localstorageは古いブラウザーでは機能しない可能性があります。 @AaronSterling –

Google map api save visit history

答えて

関連する問題