如何在用户移动时使用单个标记更新其位置？ [英] 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;
$ b $（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/skyro KML / 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：'点击放大'
}）; }
函数onMapFailure（）{
alert（'您必须有互联网连接才能查看地图'）;
}
< / script>
< / head>
< body>
< div data-role =pagestyle =width：100％; height：100％; ID = fenlandmap >
< div data-role =contentstyle =width：100％; height：100％; ID = map_content >
< div id =map_canvasstyle =width：100％; height：448px>< / div>
< / div><！ - / content - >
< div data-role =footerdata-position =fixedid =footeralign =center>
< a href =../ bbteasyfenlandloop.htmldata-role =buttondata-direction =reverse
data-transition =slide
data-icon = 箭头-1- >返回< / A>
data-transition =turndata-direction =reversedata-icon =家>家庭和LT; / A>
< button id =btnInitdata-icon =star>追踪我的位置< / button>
< / div>
< / div>
<！ - - / page - >
< / body>
解决方案
将标记移至全局范围。在任何函数之外做到这一点：
var marker = null;
然后你有两个选择： 移动标记，如果它已经被创建。
if（marker == null ）{
marker = new google.maps.Marker（{
position：map.getCenter（），
icon：image，
map：map，
title： '点击放大'
}）;
} else {
marker.setPosition（map.getCenter（））;
$ / code $ / pre $
- <如果（标记&&& marker.setMap）{$ b>将它销毁并在新的位置重新创建它。 $ b marker.setMap（null）;
marker = new google.maps.Marker（{
position：map.getCenter（），
icon：image，
map：map ，
title：'Click to zoom'
}）;
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>
解决方案
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()); }
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' });
这篇关于如何在用户移动时使用单个标记更新其位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
