Google Map API保存访问历史记录

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，可以使用以下表单插件使用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);
});
});

另一个代码将其存储在浏览器本地存储中，但没有数据库引擎更改单击时的点击，如下所示

   $( "#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 Map API保存访问历史记录

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-04-28 20:06:04

Google Map API保存访问历史记录

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-04-28 20:06:04

解决方案1
0 已采纳 2016-04-28 20:06:04