计算谷歌地图中其他用户视口的相对位置

时间:2014-07-17 09:55:13

标签: javascript jquery html5 google-maps google-maps-api-3

我正在实施Google地图协作者,其他用户查看端口则表示为矩形。如果任何用户查看端口更改,则矩形位置会更新。

现在我想实现如果用户视图端口不在我的视口上,我需要创建一个表示用户当前视口方向的头(黑圈)。我目前拥有其他用户视图端口的Bounds(LatLng)位置。为了绘制头部,我需要计算当前用户位置的角度。

您可以参考下面的图像来得到我想说的内容。如果用户视图端口在我的视口内,我可以在矩形上画一个头。但是如果用户查看端口更改,我需要计算相对于用户视图端口绘制头部(黑色圆圈)的距离和角度。
您能否告诉我一些想法来完成它。如果您已经完成了与此相关的事情,请分享您的想法。

enter image description here

1 个答案:

答案 0 :(得分:1)

google map Bounds()..获取顶部,左侧和右侧的位置,视口按钮:)

var latlgnBound = map.getBounds();
var NorthEast = latlgnBound.getNorthEast();
var SouthWest = latlgnBound.getSouthWest();
var maxlatX = NorthEast.lat();
var minlatX = SouthWest.lat();
var maxlngY = NorthEast.lng();
var minlngY = SouthWest.lng();

if (userlocation.locationx < maxlatX && userlocation.locationx > minlatX) {
        if (userlocation.locationy < maxlngY && userlocation.locationy > minlngY) {
                // draw a head :) .
        }
}

对不起,如果这不是你想要的;

用户外;

**if (userlocation.locationx > maxlatX || userlocation.locationx < minlatX) 
{
// user is outside your view
}
if (userlocation.locationy > maxlngY || userlocation.locationy < minlngY) {
                // user is outside your view
        }
}**

更新

var angle = 0;
if(userlocation.locationx > maxlatX) {        
    angle += 1;
}
if(userlocation.locationy > maxlngY){
    angle += 3;
}
if(userlocation.locationx < minlatX){
    angle += 5;
}
if(userlocation.locationy < minlngY){
    angle += 7;
}
switch(angle){
    case 1:
          //User in top view port
    break;
    case 3:
          //User in left view port
    break;
    case 5:
          //User in bottom view port
    break;
    case 7:
          //User in right view port
    break;
    case 4:
          //User in top right view port
    break;
    case 6:
          //User in top left view port
    break;
    case 10:
          //User in right bottom view port
    break;
    case 12:
          //User in left bottm view port
    break;
};

使用HTML5获取用户位置:)

  // Try HTML5 geolocation
  if(navigator.geolocation) { //Nếu trình duyệt định vị được
    navigator.geolocation.getCurrentPosition(function(position) { 
    //Lấy vị trí người dùng
      //Get location of user
      userlocation.locationx = position.coords.latitude;
      userlocation.locationy = position.coords.longitude

    }, function() {
      handleNoGeolocation(true); //Không xác định được vị trí
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
function handleNoGeolocation(errorFlag){
    if (errorFlag) {
          var content = "Can't get user location"; 
    } else {
          var content = "Browser doesn't support get location"; 
    }
}

或了解更多:http://www.w3schools.com/html/html5_geolocation.asp