Google地图保存标记位置？ [英] Google maps save marker location?

问题描述

因此，我设法在我的网站上使用可拖动标记来实施Google地图。
我现在唯一的问题是，我不知道如何保存上次放置标记的位置。因此，如果用户拖动标记4次，我只想保存第4次的位置（经度和纬度）。

这是我到目前为止（这是没有代码保存位置的工作代码）：

 < script type =text / javascriptsrc =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（）; 
}）; 
 
函数initialize（）
 {
布鲁塞尔= new google.maps.LatLng（50.833333，4.333333）; 
 
 myOptions = 
 {
 zoom：14，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
中心：布鲁塞尔，
 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）; 
}）; 
} 
  

解决方案

到本地存储？

您可以修改dragend事件侦听器，以便使用标记拖动到的位置的经度和纬度更新本地存储。当拖动标记时触发此事件，本地存储将始终包含最后一次拖动的位置（即，如果用户拖动标记4次，本地存储将保持第四次拖动的位置）。

$ b $ pre $ google.maps.event.addListener（marker，'dragend'，function（event）
{
var point = marker.getPosition（）;
map.panTo（point）;

//将位置保存到本地存储
localStorage ['lastLat'] = point.lat（）;
localStorage ['lastLng'] = point.lng（）;
}）;


显然，这只适用于支持本地存储的浏览器，因此检查这之前试图访问本地存储

So I managed to implement the google map with a dragable marker on my website. The only problem I have now is that I don't know how to save the location of where the marker is put the last time. So if a user drags the marker 4 times, I want to save the location (latitude and longitude) of the 4th time only.

This is what I have so far (This is the working code without the code to save the location):

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

解决方案

By save do you mean persist to local storage?

You could modify the dragend event listener so that it updates the local storage with the latitude and longitude of the position the marker was dragged to. As this event is triggered whenever the marker is dragged, the local storage will always contain the location of the last drag (i.e. if the user drags the marker 4 times, local storage will hold the position of the fourth drag).

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

Obviously this would only work in browsers that have support for local storage so it would be wise to check for this before attempting to access the local storage

这篇关于Google地图保存标记位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！