谷歌地图V3保存用户使用拖放后的地图位置;滴

Google Maps V3 save map position after user used drag&drop

本文关键字：地图 位置 拖放 保存 V3 用户 谷歌地图      更新时间：2023-09-26

所以我在我的网站上显示一张地图，我想在用户用鼠标在地图上拖动并点击网站上的提交按钮后保存当前地图状态，以便稍后显示，所以我需要的是在用户使用地图后获得地图的当前lat and long。

因此，如果用户回来，我可以通过设置LatLng 来显示相同的地图

<script 
type="text/javascript" 
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
function initialize() {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(mapCanvas, mapOptions);
}

//LE

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script type="text/javascript">
    var map;
    function initialize() {
        var mapCanvas = document.getElementById('map_canvas');
        var mapOptions = {
          center: new google.maps.LatLng(44.5403, -78.5463),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(mapCanvas, mapOptions);
    }

    $(window).load(function(){
        google.maps.event.addDomListener(window, 'load', initialize);
    });
    $(document).ready(function(){
        var currentLL = map.getCenter(); // you can even store it in localStorage
        var currentZoom = map.getZoom();
        console.log(currentLL);
    });
</script>

一旦用户点击提交按钮，就可以获得谷歌地图的中心位置（lat/lng）。这是保留地图的明智选择。

var currentLL = map.getCenter(); // you can even store it in localStorage
var currentZoom = map.getZoom(); // better to save zoom level too

一旦你回到地图，设置它有中心

map.setCenter(currentLL);
map.setZoom(currentZoom);

您可以使用@Praveen的解决方案，但不要将该代码放在文档就绪函数中。将它放在一个单独的函数中，并在用户点击保存按钮时调用该函数。

或者，您可以使用Maps API事件侦听器进行此操作。

您提到，当用户使用鼠标在地图上拖动后，点击按钮和时，您希望保存位置。我建议你在地图变为idle时取中心并缩放。也就是说，当平移或缩放后贴图变为空闲时。请参阅文档。

您可以使用dragend事件，但如果用户仅更改缩放级别，则该事件将不起作用。

google.maps.event.addListener(map, 'idle', function() {
    currentLL = map.getCenter();
    currentZoom = map.getZoom();
    console.log(currentLL, currentZoom);
});

这样，您总是可以使用最新的中心和缩放级别。

JSFiddle演示

相关文章：