11
Google지도 API (v3)를 사용하여 가상의 게임 세계를위한 맞춤형지도 유형을 만들었습니다. 기본적으로지도는 사용자 정의지도 유형도 가로로 반복됩니다 (아래 이미지 참조). 맞춤형지도 유형 : 반복되는지도와 아이콘. 지도에 패딩을 추가하는 방법은 무엇입니까?
는 수평 반복에서지도를 계속 할 수 있습니까? 내 맵의 경우 행성이나 구형 세계를 나타내지 않으므로 영원히 수평을 반복하면 전혀 이해가되지 않습니다. 나는 간단히 왼쪽에있는 반복지도 타일을로드 할 방법을 알아 냈 오른쪽과 같이있다 : 당신이 마커를 만들 때
그러나 마커는 여전히 모두 표시 반복지도 :
는 t을 유지하는 것이 가능 마커들은 반복하지 않니? 또는지도가 반복되지 않도록 할 수 있습니까? 그런 식으로 마커를 반복하지 않아도됩니까? 단순히 사용자가 왼쪽 또는 오른쪽으로 이동할 수 있습니다 얼마나 제한 논의 다양한 작업 차선책을 읽은지도 경계 넘어 패닝 제한 :
해결. 사용자가 전체적으로 확대/축소하고 전체지도를 한 번에 볼 수 있어야하므로이 기능은 저에게 도움이되지 않습니다. 확대 축소하면 계속 표시된 마커가 계속 표시되어 받아 들일 수 없습니다.
맵에 패딩을 추가 할 수 있습니까? 내가 나를 위해 일하는 것이 패닝을 제한 한 후, 충분한 패딩을 추가 할 수 있었다면
어떤 반복 마커를 누를 수 있기 때문에 : 그런 식으로지도 사이에 많은 공간이있다 사용자가 결코 볼 수 없도록 패딩으로 멀리 떨어져 있습니다. 마지막으로
내 코드, 아주 간단합니다 :
: 당신은 그냥 필요 같은
<!DOCTYPE html>
<html style='height: 100%'>
<head>
<link rel="stylesheet" type="text/css" href="normalize.css" />
<style>
html, body { height: 100%;}
#map_canvas { height: 1000px;}
</style>
</head>
<body style='height: 100%'>
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var options =
{
getTileUrl: function(coord, zoom)
{
// Don't load tiles for repeated maps
var tileRange = 1 << zoom;
if (coord.y < 0 || coord.y >= tileRange || coord.x < 0 || coord.x >= tileRange)
return null;
// Load the tile for the requested coordinate
var file = 'images/zoom' + zoom + '/tile_' + zoom + '_' + (coord.x) + '_' + (coord.y) + '.jpg';
return file;
},
tileSize: new google.maps.Size(256, 256),
minZoom: 1,
maxZoom: 9,
radius: 1738000, // I got this from an example in the api, I have no idea what this does
name: 'Map',
};
var mapOptions =
{
center: new google.maps.LatLng(0,0),
zoom: 2,
backgroundColor: '#000',
streetViewControl: false,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
var mapType = new google.maps.ImageMapType(options);
map.mapTypes.set('map', mapType);
map.setMapTypeId('map');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0,0),
map: map,
title: "Test"
});
</script>
</body>
</html>
여기 : [사용자 정의 타일이있는 동적 Google지도에서 반복 팬 방지] (http://stackoverflow.com/questions/12825040/dynamic-google-map-with-custom-tiles-prevent-repeating-pan) – RASG
@RASG 패닝 제한 만 해결합니다. 지도 측면에 여백이 여전히 필요합니다. –
죄송합니다. 속임수로이를 닫으려고했지만 깨닫지 못했습니다. 현상금을 다시 적용하십시오. – casperOne