1

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

   <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>
4

2 回答 2

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

工作示例

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

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

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

工作示例

于 2013-06-01T14:52:33.390 回答
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>

您将使用上面的代码在右侧获取当前用户的纬度和经度

于 2013-06-01T08:47:52.117 回答