How can I get a single marker to update it's p

2019-08-08 01:16发布

站内问答 / JavaScript
665 2 5

I'm showing a map with a "Track my Position" button. It starts marking the user's position, but leaves a trail of markers as the user moves. How can I get a single marker to update it's position as the user moves?

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

2条回答
你好瞎i
2楼-- · 2019-08-08 01:52

Move the marker to the global scope. Outside of any function do this:

var marker = null;

Then you have two options:

  • move the marker if it has already been created.

    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

  • destroy it and recreate it at the new location.

    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

查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
3楼-- · 2019-08-08 02:03

The following approach is suggested by me

1)User clicks on botton 2)Marker is placed on map 3)User drag the marker and place it where it wants

Now if the user wants to change its place again he will not click on any button just he will drag the marker at its new position 

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

You will get the current user latitude and longitude at the right side using the above code

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)