Question

我选择了要在div中保存的标记。例如，我选择一个位置lat = 35 lng = 41。我想保存这个位置。后来我选择另一个地方。然后我想保存在div中。这是我的例子http://jsfiddle.net/kjy112/QvNUF

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);

Answer 1

您需要先加载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"));
});

然后使用正确的ajax调用而不是console.log，您可以使用以下form plugin

使用ajaxform jquery插件

将其发送到服务器端文件，该文件将与数据库通信或将其存储在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中，而不是数据库引擎即使如下更改点击次数

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

Google地图api保存访问历史记录

1 个答案: