Google地图：以x像素为单位以编程方式滚动地图 [英] Google Maps: scroll map programmatically of x pixels

问题描述

一个简单的方法来滚动谷歌地图编程的 x 像素？

我只能想到使用 setCenter ，但问题是我必须根据缩放级别计算新的位置（纬度/经度）...

你能想到别的吗？告诉我，使用Google Map API是不可能的，如果您确信的话，这是一个有效的答案。

ps：我使用的是Gmaps4rails，所以如果你可以考虑用宝石来做这件事的方式，它会很酷。 （比如将边界调整为地图的一个子集。）
因为最终我的目标是防止菜单隐藏某些标记。我需要改变地图的视口，如果有意义的话，这样它就可以将标记符合到橙色区域，而不是全图。

=https://niuage.s3.amazonaws.com/stuff/fitmarkers.pngalt =适合标记>

---

解决方案：

@Shane最棒的是，这个想法非常完美，但我认为您的解决方案适用于Google API v2， ？这是我为V3做的：

  var point = map.getCenter（）; 
 
 var overlay = new google.maps.OverlayView（）; 
 overlay.draw = function（）{}; 
 overlay.setMap（map）; 
 
 var projection = overlay.getProjection（）; 
 
 var pixelpoint = projection.fromLatLngToDivPixel（point）; 
 pixelpoint.x + = my_value; ＃或.y 
 
 point = projection.fromDivPixelToLatLng（pixelpoint）; 
 
 map.setCenter（point）; 
  

如果有人知道API v3更好的解决方案，请告诉我们。

解决方案

查看投影对象：
http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection

首先，您需要获取地图的中心。

  var point = map.getCenter（）; 
  

将latlng转换为点值。

  var pixelpoint = projection.fromLatLngToPoint（point）; 
  

将您的值添加到积分值中。

  pixelpoint.x = pixelpoint.x + yourvalue; 
 //或
 pixelpoint.y = pixelpoint.y + yourvalue; 
  

将其转换为latLng。

  var newpoint = projection.fromPointToLatLng（pixelpoint）; 
  

使用新值设置新中心。

  map.setCenter（newpoint）; 
  

我没有测试过上述内容，但它应该可以工作。

Is there a simple way to scroll a google map programmatically of x pixels?

I can only think of using setCenter, but the problem is that I would have to compute the new location (lat/lng) depending on the zoom level...

Can you think of something else? Telling me that it's not possible with the Google Map API is a valid answer if you're pretty sure about it.

ps: I'm using Gmaps4rails, so if you can think of a way to do that with the gem, it'd be cool. (like adjusting the bounds to a subset of the map.) Because in the end my goal is to prevent the menu from hidding some markers. I would need to change the viewport of the map, if that makes sense, so that it fits the markers into the orange area, not the full map.

---

Solution:

@Shane Best, great, the idea works perfectly, but I think your solution was for Google API v2, right? Here's how I did it for V3:

var point = map.getCenter();

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

var projection = overlay.getProjection();

var pixelpoint = projection.fromLatLngToDivPixel(point);
pixelpoint.x += my_value; # or .y

point = projection.fromDivPixelToLatLng(pixelpoint);

map.setCenter(point);

If anybody knows about a better solution with API v3, tell us about it.

解决方案

Take a look at the projection object: http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection

First you would need to get the center of the map.

var point = map.getCenter();

Convert the latlng to a point value.

var pixelpoint = projection.fromLatLngToPoint(point);

Add yourvalue to the point values.

pixelpoint.x = pixelpoint.x + yourvalue;
//or
pixelpoint.y = pixelpoint.y + yourvalue;

Convert it back to a latLng.

var newpoint = projection.fromPointToLatLng(pixelpoint);

Set the new center with the new value.

map.setCenter(newpoint);

I haven't tested the above but it should work.

这篇关于Google地图：以x像素为单位以编程方式滚动地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！