谷歌地图保存标记位置?

Posted

技术标签:

【中文标题】谷歌地图保存标记位置?【英文标题】:Google maps save marker location? 【发布时间】:2014-03-22 19:16:02 【问题描述】:

所以我设法在我的网站上实现了带有可拖动标记的谷歌地图。 我现在唯一的问题是我不知道如何保存最后一次放置标记的位置。因此,如果用户拖动标记 4 次,我只想保存第 4 次的位置(纬度和经度)。

这是我目前所拥有的(这是没有保存位置代码的工作代码):

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

        var map = new GMap2(document.getElementById("googleMap"));
        map.addControl(new GLargeMapControl());        
        map.addControl(new GMapTypeControl());


        var centrePoint = new GLatLng('53.34870686020199', '-6.267356872558594');
        map.setCenter(centrePoint, 14); 


        var marker = new GMarker(centrePoint, draggable: true);
        map.addOverlay(marker);


        GEvent.addListener(marker, "dragend", function() 
            var point = marker.getPoint();
            map.panTo(point);
            document.getElementById("latitude").value = point.lat();
            document.getElementById("longitude").value = point.lng();
        );

        function initialize ()
        
        Brussels = new google.maps.LatLng (50.833333, 4.333333);

        myOptions = 
        
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: Brussels,
        streetViewControl: false
        

        map = new google.maps.Map (document.getElementById ("googleMap"), myOptions);

        marker = new google.maps.Marker (position: Brussels, title: "Brussel, BE");
        marker.setMap (map);
        marker.setDraggable (true);

        google.maps.event.addListener (marker, 'dragend', function (event) 
        

        var point = marker.getPosition();
        map.panTo(point);
        );             
        

【问题讨论】:

您似乎在混合使用 google maps api v2 和 v3。 我是吗?它完全可以工作。我只是不知道如何保存位置.. 您希望用户在第四次拖动后不能再拖动? 不,我希望他能够随心所欲地拖动。但我只想保存最后一次拖动。例如,它被保存在数据库中。我不想保存标记放置的所有位置。只有最后一个。 【参考方案1】:

你的意思是保存到本地存储吗?

您可以修改 dragend 事件侦听器,以便它使用标记拖动到的位置的纬度和经度更新本地存储。由于每次拖动标记都会触发此事件,因此本地存储将始终包含最后一次拖动的位置(即,如果用户拖动标记4次,本地存储将保存第四次拖动的位置)。

google.maps.event.addListener (marker, 'dragend', function (event) 

    var point = marker.getPosition();
    map.panTo(point);

    // save location to local storage
    localStorage['lastLat'] = point.lat();
    localStorage['lastLng'] = point.lng();
); 

显然这仅适用于支持本地存储的浏览器,因此在尝试访问本地存储之前检查这一点是明智的

【讨论】:

我希望它看起来像这样:universimmedia.pagesperso-orange.fr/geo/loc.htm 完全一样,我想让我的经度和纬度在我移动标记时发生变化。然后能够将其保存到例如数据库中。我对此很陌生:/希望我解释得很好 这正是我的意思!非常感谢你。现在您知道如何将位置保存到数据库吗?使用 php 这是一个运行在服务器上的 webapp 吗?您可以在传递用户名、纬度和经度作为参数的 'dragend' 事件侦听器中触发对服务器的 Ajax 调用。然后,服务器将根据新的纬度和经度更新指定用户的最后位置。

以上是关于谷歌地图保存标记位置?的主要内容,如果未能解决你的问题,请参考以下文章

在谷歌地图标记上显示信息

谷歌地图标记出现在地图上的错误位置

怎么在谷歌地图上做标记呀

如何在不刷新整个地图的情况下更新谷歌地图上的标记位置?

如何从angularJS中的谷歌地图标记获取动态位置

使用当前位置将折线绘制到目的地,并在谷歌地图上添加标记,标记颤动