Với API Google Maps (v3), tôi đã tạo một loại bản đồ tùy chỉnh cho thế giới trò chơi hư cấu. Theo mặc định, bản đồ, ngay cả các loại bản đồ tùy chỉnh, lặp lại theo chiều ngang (xem hình ảnh bên dưới).Loại bản đồ tùy chỉnh: lặp lại bản đồ và điểm đánh dấu. Làm thế nào để thêm đệm vào bản đồ?
Có thể giữ bản đồ từ lặp đi lặp lại theo chiều ngang? Đối với bản đồ của tôi, nó không đại diện cho một hành tinh hay thế giới hình cầu, vì vậy việc lặp lại nó mãi mãi không có ý nghĩa gì cả. Tôi đã tìm ra cách để đơn giản là không tải gạch cho các bản đồ lặp đi lặp lại ở bên trái và bên phải như vậy:
Tuy nhiên, khi bạn tạo dấu này, dấu hiệu vẫn còn hiển thị cho tất cả các bản đồ lặp đi lặp lại:
có thể giữ t anh ta đánh dấu lặp đi lặp lại? Hoặc có thể giữ bản đồ lặp lại không? Bằng cách đó tôi không phải đối phó với các dấu hiệu lặp đi lặp lại?
làm việc xung quanh: Giới hạn Xoay ngoài Map Bounds Tôi đã đọc nhiều công việc ở quanh đó thảo luận đơn giản là hạn chế thế nào đến nay người dùng có thể pan sang trái hoặc phải. Điều này sẽ không hiệu quả đối với tôi vì tôi phải cho phép người dùng phóng to hết cỡ và xem toàn bộ bản đồ cùng một lúc. Nếu họ phóng to hết cỡ, các điểm đánh dấu lặp lại vẫn hiển thị, điều này là không thể chấp nhận được.
Có thể thêm một nhóm đệm vào bản đồ không? Bằng cách đó có một số lượng lớn các khoảng trống giữa các bản đồ:
Nếu tôi đã có thể để thêm đủ đệm, sau đó hạn chế panning sẽ làm việc cho tôi, bởi vì bất kỳ dấu hiệu lặp đi lặp lại có thể được đẩy đủ xa bởi phần đệm mà người dùng sẽ không bao giờ thấy chúng.
Cuối cùng mã của tôi, khá đơn giản:
(lưu ý: những hình ảnh ngói đồ tôi đang sử dụng không có sẵn trực tuyến chưa)
<!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>
tại đây: [Bản đồ google động với ô tùy chỉnh ngăn chặn lặp lại pan] (http://stackoverflow.com/questions/12825040/dynamic-google-map-with-custom-tiles-prevent-repeating-pan) – RASG
@RASG chỉ giải quyết giới hạn panning. Vẫn cần đệm ở hai bên bản đồ. –
Xin lỗi, sắp sửa đóng cửa này như một sự lừa gạt nhưng sau đó nhận ra nó không phải là. Cảm thấy tự do để áp dụng lại tiền thưởng. – casperOne