当用户移动时，如何获取单个标记来更新其位置？答案

【问题标题】：How can I get a single marker to update it's position as the user moves?当用户移动时，如何获取单个标记来更新其位置？
【发布时间】：2013-05-28 01:33:30
【问题描述】：

我正在显示带有“跟踪我的位置”按钮的地图。它开始标记用户的位置，但在用户移动时留下一串标记。如何在用户移动时获取单个标记来更新其位置？

   <script type="text/javascript">
        $( document ).bind( "mobileinit", function() {
                           $.mobile.allowCrossDomainPages = true;
                           });
        </script>

     <script src="../../jquery.mobile.min.js"></script>
     <script src="https://maps.googleapis.com/maps/api/js?     key=AIzaSyCvtEfhi11SeoL1Osfo8St53JRkasYnTRw&sensor=true"></script>
     <script src="../../cordova-2.7.0.js"></script>
     <script type="text/javascript">

        var map;
        var image = "../../bbimages/cycling.png";

        $(document).on('pageshow', '#fenlandmap', function(){

                       $(document).on('click', '#”btnInit”', function(){
                                       navigator.geolocation.watchPosition(onMapSuccess, onMapFailure, {enableHighAccuracy:true,timeout:20000});
                                      });

                       var latlng = new google.maps.LatLng(51.183244, -115.585399);
                       var myOptions = {
                       zoom: 15,
                       streetViewControl: false,
                       center: latlng,
                       mapTypeId: google.maps.MapTypeId.HYBRID
                       };
                       map = new google.maps.Map(document.getElementById("map_canvas"),
                                                 myOptions);
                       var kmlUrl =          'http://www.sites.google.com/site/skyrokml/kml/FenlandTrail.kml';
                       var kmlOptions = {
                       suppressInfoWindows: false,
                       preserveViewport: true,
                       map: map
                       };
                       var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);

                       });

        function onMapSuccess(pos) {
            map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
            var marker = new google.maps.Marker({
                                                position: map.getCenter(),
                                                icon: image,
                                                map: map,
                                                title: 'Click to zoom'
                                                });            }

        function onMapFailure() {
            alert('You must have an internet connection to view the maps');
        }

        </script>

</head>
<body>
 <div data-role="page" style="width:100%;height:100%;" id="fenlandmap">

    <div data-role="content" style="width:100%;height:100%;" id="map_content">
        <div id="map_canvas" style="width:100%; height:448px"></div>
    </div><!-- /content -->
    <div data-role="footer" data-position="fixed" id="footer" align="center">
        <a href="../bbteasyfenlandloop.html" data-role="button" data-direction="reverse"
            data-transition="slide"
            data-icon="arrow-l">Back</a>
        <a href="../../index.html" data-role="button"
            data-transition="turn" data-direction="reverse" data-icon="home">Home</a>
        <button id=”btnInit” data-icon="star">Track my Position</button>
    </div>

 </div>
<!-- /page -->

</body>

【问题讨论】：

标签： javascript google-maps-api-3 geolocation google-maps-markers

【解决方案1】：

以下方法是我建议的

1) 用户点击按钮 2）标记放置在地图上 3）用户拖动标记并将其放置在它想要的位置

现在如果用户想再次改变它的位置，他不会点击任何按钮只是他会将标记拖到新位置

<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>

 <script type="text/javascript">
    var lat, lng;
    var latlng = new google.maps.LatLng(18.5236, 73.8478);
    function initialize() {
        var myoptions = {
            center: latlng,
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"), myoptions);

        function addmarker(latlng) {
            var marker = new google.maps.Marker({
                position: latlng,
                title: 'new marker',
                draggable: true,
                map: map
            });


            google.maps.event.addListener(marker, 'dragend', function (evt) {
                document.getElementById('current').innerHTML='Latitude : ' + evt.latLng.lat().toFixed(5) + ' Longitude : ' + evt.latLng.lng().toFixed(5);
                lat = evt.latLng.lat().toFixed(5); // here you will always get latitude 
                lng = evt.latLng.lng().toFixed(5); // here you will always get longitude


            });

            google.maps.event.addListener(marker, 'dragstart', function (evt) {
            });

            map.setCenter(marker.position);
            marker.setMap(map);
        }
        $('#btnaddmarker').on('click', function () {
            addmarker(latlng)
            var mapBtn = document.getElementById('btnaddmarker');
            mapBtn.disabled = true;
         })
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

<script type="text/javascript">
  window.onload = function () {

         initialize(); 
    }

</script>
</head>
<body>
<div class="welcome" style="width: 1200px; height:800px; margin: 0px 50px 0px 50px;">
    <div>
        <button id="btnaddmarker" class="btn btn-primary" style="">add marker</button>
        <div id="current" style="float:right">Nothing yet...</div>
    </div>
    <div>
        <div id="googleMap" style="width: 100%; height: 500px; float: left; margin-left: -7px;"></div>
    </div>
</div>
</body>
</html>

使用上面的代码你会在右侧得到当前用户的经纬度

【讨论】：

【解决方案2】：

将标记移动到全局范围。在任何函数之外执行此操作：

var marker = null;

那么你有两个选择：

如果标记已经创建，请移动它。

if (marker == null) {
      marker = new google.maps.Marker({
          position: map.getCenter(),
          icon: image,
          map: map,
          title: 'Click to zoom'
      });
    } else {
      marker.setPosition(map.getCenter());
    }

working example

销毁它并在新位置重新创建它。

if (marker && marker.setMap) {
      marker.setMap(null);
    }

    marker = new google.maps.Marker({
      position: map.getCenter(),
      icon: image,
      map: map,
      title: 'Click to zoom'
    });

working example

【讨论】：