在 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});
}
需要获取动态位置图钉,而不是移动到我从 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});
}