Google Maps API V3 - 自定义瓷砖 [英] Google Maps API V3 - Custom Tiles

问题描述

我目前通过此处开发Google Maps API V3。

如果您在21至23之间缩放，则地图上会有图像叠加。加载图片需要很长时间，我决定将其分成不同的图块以便于加载。我使用自动瓷砖切割机将图像切割成瓷砖。

我遇到了脚本问题;

  var OrgX = 31551; // Photoshop文档左上角的贴图的Google地图X值
 var OrgY = 50899; // Photoshop文档左上角的贴图的Google Maps Y值
  

第一个问题如何从photoshop文档中找到X和Y的值？

假设我设法解决第一个问题。 p>

第二个问题以下代码是否正确显示取决于缩放级别的切片？或者我缺少任何代码？

  var BuildingsLayer = new google.maps.ImageMapType（{
 getTileUrl：function coord，zoom）{
 returnhttp://search.missouristate.edu/map/tilesets/baselayer/+ zoom +_+ coord.x +_+ coord.y +.png ; 
}，
 tileSize：new google.maps.Size（256,256），
 isPng：true 
}）; 
 
 map.overlayMapTypes.push（BuildingsLayer）; 
  

解决方案

MapTiler。
不仅它将图片分割为图块，而且还生成了javascript tiles脚本来使用它。

但是，脚本是用v2编写的。您可以按照下列方式编辑代码：

v3 tiles script

  var maptiler = new google.maps.ImageMapType（{
 getTileUrl：function（coord，zoom）{
 return zoom +/+ coord.x +/+（ Math.pow（2，zoom）-coord.y-1）+.png; 
}，
 tileSize：new google.maps.Size（256,256），
 isPng ：true 
}）; 
 
 var map; 
 
函数initialize（）{
 map = new google.maps.Map（document.getElementById（map_canvas））; 
 map.setCenter（new google.maps.LatLng（36.07，-112.19））; 
 map.setZoom（11）; 
 map.setMapTypeId（'satellite'）; 
 map.overlayMapTypes.insertAt（0，maptiler）; 
} 
  

点数

I am currently working on Google Maps API V3 over here

If you zoom between 21 to 23, there will be an image overlay on the map. The image takes too long to load and I have decided to break it into different tiles for easier loading. I am using Automatic Tile Cutter to cut the image into tiles.

I have problems with the script;

    var OrgX = 31551;   // the Google Maps X value of the tile at the top left corner of your Photoshop document 
    var OrgY = 50899;   // the Google Maps Y value of the tile at the top left corner of your Photoshop document

First question How do you find the values of X and Y from the photoshop document?

Let say if I manage to solve the first question.

Second question Is the below code correct to display the tiles depending on the zoom level? Or am I missing any codes?

var BuildingsLayer = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
        return "http://search.missouristate.edu/map/tilesets/baselayer/" + zoom + "_" + coord.x + "_" + coord.y + ".png";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true
});

map.overlayMapTypes.push(BuildingsLayer);

解决方案

Instead of using Automatic Tile Cutter, I used and recommended MapTiler. Not only it slices the image into tiles and it also generates out a javascript tiles script to use it.

However, the script is written in v2. You can edit the codes according:

v3 tiles script

var maptiler = new google.maps.ImageMapType({ 
  getTileUrl: function(coord, zoom) { 
return zoom + "/" + coord.x + "/" + (Math.pow(2,zoom)-coord.y-1) + ".png"; 
}, 
  tileSize: new google.maps.Size(256, 256), 
  isPng: true 
}); 

var map; 

function initialize() { 
 map = new google.maps.Map(document.getElementById("map_canvas")); 
 map.setCenter(new google.maps.LatLng(36.07, -112.19)); 
 map.setZoom(11); 
 map.setMapTypeId('satellite'); 
 map.overlayMapTypes.insertAt(0, maptiler); 
}

Credits

这篇关于Google Maps API V3 - 自定义瓷砖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！