在 bing 地图上获取移动地理位置

getting moving gelocation on bing maps

需要获取动态位置图钉,而不是移动到我从 html5 地理定位中获取的位置。我尝试了一些其他的东西,但图钉不断生成重复项。删除图钉剂量也可以。

var map = null;
var p = 0;
var x = document.getElementById("notice");
$(document).ready(function(){
  getLocation();
  watchPosition();
});
function watchPosition() {
  //map options
  var mapOptions = {
    credentials: "key here",
    mapTypeId: Microsoft.Maps.MapTypeId.road,
    zoom: 19
  };
  //map initialization
  map = new Microsoft.Maps.Map(document.getElementById('mapDiv'), mapOptions);
}
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(success, error, {maximumAge: 5000,
                                                         enableHighAccuracy: true});
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function error(err) {
  x.innerHTML = err.toString();
}
function success(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
  var pos = new Microsoft.Maps.Location(position.coords.latitude, position.coords.longitude);
  //console.log(pos);
  p++;
  console.log(p);
  //infobox
  var offsetInfo = new Microsoft.Maps.Point(0, 30); 
  var infoboxOptions  = { title: "Location Information", description:   "This is your current location.", offset: offsetInfo };
  var callout = new Microsoft.Maps.Infobox(pos, infoboxOptions);
  //pushpin
  var offsetPin = new Microsoft.Maps.Point(0, 5);
  var pushpinOptions = {text : '1', visible: true, textOffset: offsetPin};
  var pushpin = new Microsoft.Maps.Pushpin(pos, pushpinOptions);
  map.setView({center:pos});
  if (p <= 1) {
    map.entities.push(pushpin);
  } else {
    pushpin.setLocation(pos);
    console.log(toString(pushpin.getLocation()));
  }
}

您遇到的问题是您一直在创建新的图钉实例并设置它的位置。在第一个图钉之后,不再添加其他图钉。您需要做的是创建一个全局图钉变量,并且仅在该变量为 null 时才创建它,如果不是,则设置它的位置。这是成功函数的修改版本:

var pushpin;

function success(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
    var pos = new Microsoft.Maps.Location(position.coords.latitude, position.coords.longitude);

    p++;
    console.log(p);

    if(pushpin){
        pushpin.setLocation(pos);
    }else{
        //infobox
        var offsetInfo = new Microsoft.Maps.Point(0, 30); 
        var infoboxOptions  = { title: "Location Information", description:   "This is your current location.", offset: offsetInfo };
        var callout = new Microsoft.Maps.Infobox(pos, infoboxOptions);

        //pushpin
        var offsetPin = new Microsoft.Maps.Point(0, 5);
        var pushpinOptions = {text : '1', visible: true, textOffset: offsetPin};
        pushpin = new Microsoft.Maps.Pushpin(pos, pushpinOptions);
        map.entities.push(pushpin);
    }

    map.setView({center:pos});
}