Javascript 如何获得单个标记来更新它'；用户移动时的位置？_Javascript_Google Maps Api 3_Geolocation_Google Maps Markers

Javascript 如何获得单个标记来更新它'；用户移动时的位置？

javascript google-maps-api-3 geolocation

Javascript 如何获得单个标记来更新它'；用户移动时的位置？,javascript,google-maps-api-3,geolocation,google-maps-markers,Javascript,Google Maps Api 3,Geolocation,Google Maps Markers,我正在用“跟踪我的位置”按钮显示地图。它开始标记用户的位置，但在用户移动时留下标记的痕迹。如何让单个标记在用户移动时更新其位置 <script type="text/javascript"> $( document ).bind( "mobileinit", function() { $.mobile.allowCrossDomainPages = true;

我正在用“跟踪我的位置”按钮显示地图。它开始标记用户的位置，但在用户移动时留下标记的痕迹。如何让单个标记在用户移动时更新其位置

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


$（document）.bind（“mobileinit”，function（）{
$.mobile.allowCrossDomainPages=true；
});
var映射；
var image=“../bbimages/cycling.png”；
$（文档）.on（'pageshow'，'#fenlandmap'，function（）{
$（文档）。在（'单击'，'#“btnInit”'，函数（）上{
navigator.geolocation.watchPosition（onMapSuccess，onMapFailure，{enableHighAccurance:true，timeout:20000}）；
});
var latlng=新的google.maps.latlng（51.183244，-115.585399）；
变量myOptions={
缩放：15，
街景控制：错误，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.HYBRID
};
map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
var Kmlur='1〕http://www.sites.google.com/site/skyrokml/kml/FenlandTrail.kml';
var kmlOptions={
suppressInfoWindows:false，
对,，
地图：地图
};
var kmlLayer=新的google.maps.kmlLayer（kmlUrl，kmlOptions）；
});
函数onMapSuccess（pos）{
map.setCenter（新的google.maps.LatLng（pos.coords.lation，pos.coords.longitude））；
var marker=new google.maps.marker({
位置：map.getCenter（），
图标：图像，
地图：地图，
标题：“单击以缩放”
});            }
函数onMapFailure（）{
警报（“您必须具有internet连接才能查看地图”）；
}
跟踪我的位置

我建议采用以下方法

1）用户点击botton 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>


var lat，液化天然气；
var latlng=新的google.maps.latlng（18.5236,73.8478）；
函数初始化（）{
变量myoptions={
中心：拉特林，
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googleMap”），myoptions）；
功能添加标记（latlng）{
var marker=new google.maps.marker({
位置：latlng，
标题：“新标记”，
真的，
地图：地图
});
google.maps.event.addListener（标记'dragend'，函数（evt）{
document.getElementById（'current'）.innerHTML='Latitude:'+evt.latLng.lat（）.toFixed（5）+'经度：'+evt.latLng.lng（）.toFixed（5）；
lat=evt.latLng.lat（）.toFixed（5）；//在这里您将始终获得纬度
lng=evt.latLng.lng（）.toFixed（5）；//在这里，您将始终获得经度
});
google.maps.event.addListener（标记'dragstart'，函数（evt）{
});
地图设置中心（标记位置）；
marker.setMap（map）；
}
$（'btnaddmarker'）。在（'click'，函数（）{
添加标记（板条）
var mapBtn=document.getElementById（'btnaddmarker'）；
mapBtn.disabled=true；
})
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
window.onload=函数（）{
初始化（）；
}
添加标记
还没有。。。

您将使用上述代码在右侧获得当前用户纬度和经度

将标记移动到全局范围。在任何功能之外，请执行以下操作：

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