如何在谷歌地图中启用水平世界重复? [英] How to enable horizontally world repeat in google maps?
本文介绍了如何在谷歌地图中启用水平世界重复?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用Google地图(通过OpenStreetMap),并且需要水平重复世界。我认为它默认,但它不是。
var map;
map = new google.maps.Map(element,{
center:new google.maps.LatLng(mapa_start_X,mapa_start_Y),
zoom:mapa_start_Z,
mapTypeId:OSM,
mapTypeControl:false,
streetViewControl:true
});
map.mapTypes.set(OSM,new google.maps.ImageMapType({
getTileUrl:function(coord,zoom){
returnhttp:// tile .openstreetmap.org /+ zoom +/+ coord.x +/+ coord.y +.png;
// return/tile.php?z=+ zoom + & x =+ coord.x +& y =+ coord.y;
},
tileSize:new google.maps.Size(256,256),
name :OpenStreetMap,
maxZoom:18
}));
元素
是DOM中的对象, mapa_start_X
, mapa_start_Y
和 mapa_start_Z
是在其他代码部分定义的变量。
我应该在地图的构造函数中添加什么?
解决方案
您必须更改使用getTileUrl函数来标准化x方向上的坐标,如文档示例 a>。
map.mapTypes.set(OSM,new google.maps.ImageMapType({
getTileUrl :function(coord,zoom){
var normalizedCoord = getNormalizedCoord(coord,zoom);
if(!normalizedCoord){
return null;
}
return http://tile.openstreetmap.org/+ zoom +/+ normaliz edCoord.x +/+ normalizedCoord.y +.png;
},
tileSize:新增google.maps.Size(256,256),
名称:OpenStreetMap,
maxZoom:18,
minZoom:1
}));
//标准化在x轴(水平)
//与标准Google地图图块一样的图块重复的坐标。
函数getNormalizedCoord(coord,zoom){
var y = coord.y;
var x = coord.x;
//在一个方向范围内的拼贴范围取决于缩放级别
// 0 = 1拼贴,1 = 2拼贴,2 = 4拼贴,3 = 8拼贴等
var tileRange = 1<<放大;
//不在y轴上重复(垂直)
if(y <0 || y> = tileRange){
return null;
}
//沿x轴重复
if(x <0 || x> = tileRange){
x =(x%tileRange + tileRange )%tileRange;
}
返回{
x:x,
y:y
};
}
I am using Google maps (via OpenStreetMap) and need to have world repeated horizontally. I thought its by default, but it is not.
var map;
map = new google.maps.Map(element, {
center : new google.maps.LatLng(mapa_start_X, mapa_start_Y),
zoom : mapa_start_Z,
mapTypeId: "OSM",
mapTypeControl: false,
streetViewControl: true
});
map.mapTypes.set("OSM", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
//return "/tile.php?z=" + zoom + "&x=" + coord.x + "&y=" + coord.y;
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18
}));
element
is object in DOM, mapa_start_X
, mapa_start_Y
and mapa_start_Z
are variables defined in other part of code.
What should I add to the constructor of the map?
解决方案
You have to change the getTileUrl function to normalize the coordinates in the x direction like the example in the documentation.
map.mapTypes.set("OSM", new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
var normalizedCoord = getNormalizedCoord(coord, zoom);
if (!normalizedCoord) {
return null;
}
return "http://tile.openstreetmap.org/" + zoom + "/" + normalizedCoord.x + "/" + normalizedCoord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18,
minZoom: 1
}));
// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
var y = coord.y;
var x = coord.x;
// tile range in one direction range is dependent on zoom level
// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
var tileRange = 1 << zoom;
// don't repeat across y-axis (vertically)
if (y < 0 || y >= tileRange) {
return null;
}
// repeat across x-axis
if (x < 0 || x >= tileRange) {
x = (x % tileRange + tileRange) % tileRange;
}
return {
x: x,
y: y
};
}
这篇关于如何在谷歌地图中启用水平世界重复?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文