谷歌地圖api保存訪問歷史記錄

我選擇與我想保存在一個div中的標記。例如，我選擇一個地方lat = 35 lng = 41。我想保存這個位置。後來我選擇了另一個地方。然後我想保存在div中。這裏我舉的例子http://jsfiddle.net/kjy112/QvNUF 谷歌地圖api保存訪問歷史記錄

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

你需要在這裏加載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() { 
    console.log($("#lat").data('lat')); 
    console.log($("#long").data("long")); 
});

然後代替的console.log使用正確的Ajax調用，您可以使用使用給ajaxForm jQuery插件以下form plugin

將其發送到您的服務器端文件，該文件將與數據庫通信或將其存儲在json/xml文件中以備將來需要

的HTML會是這樣的

<body> 
    <section> 
     <div id='map_canvas'></div> 
     <div id="current">Nothing yet...</div> 
     <button id="saving" type="button">save Me!</button> 
    </section> 
</body>

另一個代碼，而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數據庫引擎改變的點擊甚至如下

$("#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

沒有工作任何東西，這個代碼只需要lat和lng座標它不會保存在任何地方。 –

我更新了代碼，你需要檢查控制檯，它現在工作，但是你需要指定你在服務器端使用的是哪種語言，所以我可以進一步幫助我寫下你在代碼中缺少的東西@AaronSterling –

if你需要進一步的服務器端頁面的幫助，只需要:)在存儲到數據庫之前只需要remmeber就可以轉義，但是它不建議使用數據庫，它似乎是一個簡單的應用程序，localstorage也可能不適用於舊瀏覽器，而是使用json對象@AaronSterling –

谷歌地圖api保存訪問歷史記錄

回答

相關問題