Niestandardowe typy map: powtarzające się mapy i markery. Jak dodać dopełnienie do mapy?
Z Google Maps API (v3) stworzyłem niestandardowy typ mapy dla fikcyjnego świata gier. Domyślnie mapy, nawet niestandardowe typy map, powtarzają się poziomo (patrz rysunek poniżej).
Czy można zachować powtarzalność mapy w poziomie? Dla mojej mapy nie reprezentuje ona planety ani kulistego świata, więc powtarzanie jej w poziomie na zawsze wcale nie ma sensu. Zorientowałem się, jak po prostu nie ładować kafelków do powtarzanych map po lewej i prawej stronie w ten sposób:
JEDNAK, kiedy tworzysz znaczniki, znaczniki nadal pojawiają się dla wszystkich powtarzanych map:
Czy możliwe jest uniknięcie powtarzania znaczników? A może w ogóle nie można powtarzać mapy? W ten sposób nie muszę zajmować się powtarzaniem markerów?
Work Around: Ogranicz panoramowanie poza granicami mapy Przeczytałem różne obejścia omawiające po prostu ograniczenie odległości, jaką użytkownik może przesuwać w lewo lub w prawo. To nie zadziała dla mnie, ponieważ muszę pozwolić użytkownikowi na przybliżenie całej mapy i obejrzenie całej mapy naraz. Jeśli powiększą całą drogę, powtarzające się znaczniki są nadal widoczne, co jest niedopuszczalne.
Czy możliwe jest dodanie pęczka do mapy? W ten sposób między mapami jest dużo miejsca:
Gdybym był w stanie dodać wystarczającą ilość wypełnienia, ograniczenie przesuwania działałoby na mnie, ponieważ wszelkie powtarzające się znaczniki mogłyby zostać przesunięte wystarczająco daleko przez wypełnienie, którego użytkownik nigdy by ich nie zobaczył.
Wreszcie mój kod, bardzo prosty:
(uwaga: obrazy kafelków mapy, których używam, nie są jeszcze dostępne online)
<!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>