Benutzerdefinierte Kartentypen: Wiederholen von Karten und Markierungen. Wie füge ich der Karte eine Polsterung hinzu?
Mit der Google Maps API (v3) habe ich einen benutzerdefinierten Kartentyp für eine fiktive Spielwelt erstellt. Standardmäßig werden Karten, auch benutzerdefinierte Kartentypen, horizontal wiederholt (siehe Abbildung unten).
Kann die Karte nicht horizontal wiederholt werden? Für meine Karte stellt sie weder einen Planeten noch eine kugelförmige Welt dar. Daher macht es überhaupt keinen Sinn, sie für immer horizontal zu wiederholen. Ich habe herausgefunden, wie man einfach keine Kacheln für die wiederholten Karten links und rechts so lädt:
Wenn Sie jedoch Markierungen erstellen, werden diese weiterhin für alle wiederholten Karten angezeigt:
Ist es möglich, dass sich die Marker nicht wiederholen? Oder kann die Karte überhaupt nicht wiederholt werden? Auf diese Weise muss ich mich nicht mit Markern auseinandersetzen, die sich wiederholen?
Problemumgehung: Begrenzen Sie das Schwenken über die Kartengrenzen hinaus Ich habe verschiedene Workarounds gelesen, in denen lediglich erläutert wird, wie weit der Benutzer nach links oder rechts schwenken kann. Dies funktioniert bei mir nicht, da ich dem Benutzer erlauben muss, ganz herauszuzoomen und die gesamte Karte auf einmal anzuzeigen. Wenn sie ganz herauszoomen, sind immer noch wiederholte Markierungen sichtbar, was nicht akzeptabel ist.
Ist es möglich, der Karte ein paar Auffüllungen hinzuzufügen? Auf diese Weise ist zwischen den Karten viel Platz:
Wenn ich in der Lage wäre, genügend Polster hinzuzufügen, würde das Begrenzen des Schwenkens für mich funktionieren, da alle wiederholten Markierungen durch das Polster so weit weggedrückt werden könnten, dass der Benutzer sie niemals sehen würde.
Endlich mein Code, ziemlich einfach:
(Hinweis: Die von mir verwendeten Kartenkacheln sind noch nicht online verfügbar.)
<!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>