Question

所以我在我的网站上显示一张地图，我希望用户用鼠标在地图上拖动并点击网站上的提交按钮以保存当前地图状态，以便稍后显示，所以我需要的是在用户使用地图后获取地图的当前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>

Answer 1

用户点击提交按钮后，获取Google地图的中心位置（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);

Answer 2

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

或者您可以使用Maps API事件侦听器。

您提到要在用户使用鼠标拖动地图后按和 按钮时保存位置。我建议您在地图变为idle时获得中心和缩放。也就是说，在平移或缩放后地图变为空闲时。请参阅documentation。

您可以使用dragend事件，但如果用户仅更改了缩放级别，那么该功能无效。

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

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

JSFiddle demo

用户使用拖放功能后，Google Maps V3会保存地图位置

2 个答案: