Tài liệu này thảo luận về các loại bản đồ bạn có thể hiển thị bằng cách sử dụng Maps JavaScript API. API sử dụng một đối tượng MapType để lưu giữ thông tin về những bản đồ này. MapType là một giao diện xác định cách hiển thị và sử dụng các ô bản đồ, cũng như việc chuyển đổi hệ toạ độ từ toạ độ màn hình sang toạ độ thế giới (trên bản đồ). Mỗi MapType phải chứa một vài phương thức để xử lý việc truy xuất và giải phóng thẻ thông tin, cũng như các thuộc tính xác định hành vi trực quan của thẻ thông tin đó.
Hoạt động bên trong của các loại bản đồ trong API JavaScript của Maps là một chủ đề nâng cao. Hầu hết các nhà phát triển đều có thể sử dụng các loại bản đồ cơ bản được nêu dưới đây. Tuy nhiên, bạn cũng có thể sửa đổi cách trình bày các loại bản đồ hiện có bằng cách sử dụng Bản đồ được tạo kiểu hoặc xác định các ô bản đồ của riêng mình bằng loại bản đồ tuỳ chỉnh. Khi cung cấp các loại bản đồ tùy chỉnh, bạn sẽ cần phải hiểu cách sửa đổi Cơ quan đăng ký loại bản đồ của bản đồ.
Các loại bản đồ cơ bản
Có bốn loại bản đồ có sẵn trong Maps JavaScript API. Ngoài các ô bản đồ đường "vẽ" quen thuộc, API JavaScript của Maps cũng hỗ trợ các loại bản đồ khác.
Có những loại bản đồ sau trong API JavaScript của Maps:
roadmapsẽ cho thấy chế độ xem bản đồ đường mặc định. Đây là loại bản đồ mặc định.satellitehiển thị hình ảnh vệ tinh của Google Earth.hybridhiển thị kết hợp chế độ xem thông thường và chế độ xem vệ tinh.terrainhiển thị bản đồ thực tế dựa trên thông tin địa hình.
Bạn sẽ sửa đổi loại bản đồ mà Map sử dụng bằng cách đặt thuộc tính mapTypeId của thuộc tính đó, trong hàm khởi tạo thông qua việc đặt đối tượng Map options hoặc bằng cách gọi phương thức setMapTypeId() của bản đồ. Theo mặc định, thuộc tính mapTypeID có giá trị là roadmap.
Thiết lập mapTypeId khi xây dựng:
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: 'satellite'
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
Sửa đổi mapTypeId một cách linh động:
map.setMapTypeId('terrain');
Xin lưu ý rằng bạn không trực tiếp đặt loại bản đồ của bản đồ, mà thay vào đó hãy đặt mapTypeId để tham chiếu đến một MapType bằng giá trị nhận dạng.
API JavaScript của Maps sử dụng sổ đăng ký loại bản đồ, được giải thích bên dưới, để quản lý những tham chiếu này.
Hình ảnh 45°
API JavaScript của Maps hỗ trợ hình ảnh 45° đặc biệt cho một số vị trí nhất định. Hình ảnh có độ phân giải cao này cung cấp các góc nhìn phối cảnh theo mỗi hướng chính (Bắc, Nam, Đông, Tây). Những hình ảnh này có sẵn ở mức thu phóng cao hơn trên các loại bản đồ được hỗ trợ.
Hình ảnh sau đây minh hoạ toàn cảnh Thành phố New York theo góc nhìn 45°:
Các loại bản đồ satellite và hybrid hỗ trợ hình ảnh 45° ở mức thu phóng cao (12 trở lên) nếu có. Nếu người dùng phóng to vào một vị trí có hình ảnh đó, thì các loại bản đồ này sẽ tự động thay đổi khung hiển thị theo cách sau:
- Hình ảnh vệ tinh hoặc hình ảnh kết hợp được thay thế bằng hình ảnh cung cấp góc nhìn 45°, căn giữa vị trí hiện tại. Theo mặc định, các khung hiển thị đó sẽ hướng về phía bắc. Nếu người dùng thu nhỏ, hình ảnh vệ tinh hoặc
hình ảnh kết hợp mặc định sẽ xuất hiện lại. Hành vi này thay đổi tuỳ thuộc vào mức thu phóng và giá trị của
tilt: - Ở các mức thu phóng 12 và 18, bản đồ cơ sở từ trên xuống (0°) sẽ hiển thị theo mặc định, trừ phi bạn đặt
tiltthành 45. - Ở các mức thu phóng từ 18 trở lên, bản đồ cơ sở 45° sẽ hiển thị trừ phi bạn đặt
tiltthành 0. - Điều khiển xoay sẽ hiển thị. Nút điều khiển xoay cung cấp các tuỳ chọn cho phép người dùng chuyển đổi độ nghiêng và xoay khung hiển thị theo gia số 90° theo một trong hai hướng. Để ẩn thanh điều khiển xoay, hãy đặt
rotateControlthànhfalse.
Việc thu nhỏ từ một loại bản đồ hiển thị hình ảnh 45° sẽ huỷ bỏ từng thay đổi này, thiết lập lại các loại bản đồ ban đầu.
Bật và tắt hình ảnh 45°
Bạn có thể tắt hình ảnh 45° bằng cách gọi setTilt(0) trên đối tượng Map. Để bật hình ảnh 45° cho các loại bản đồ được hỗ trợ,
hãy gọi setTilt(45). Phương thức getTilt() của Map sẽ luôn phản ánh tilt hiện tại đang hiển thị trên bản đồ; nếu bạn đặt một tilt trên bản đồ rồi sau đó xoá tilt đó (ví dụ: bằng cách thu nhỏ bản đồ), phương thức getTilt() của bản đồ sẽ trả về 0.
Lưu ý quan trọng: Chỉ hỗ trợ hình ảnh 45° trên bản đồ đường quét; không thể sử dụng hình ảnh này với bản đồ vectơ.
Ví dụ sau đây hiển thị khung cảnh 45° của Thành phố New York:
TypeScript
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
center: { lat: 40.76, lng: -73.983 },
zoom: 15,
mapTypeId: "satellite",
}
);
map.setTilt(45);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 40.76, lng: -73.983 },
zoom: 15,
mapTypeId: "satellite",
});
map.setTilt(45);
}
window.initMap = initMap;
Thử mẫu
Xoay hình ảnh 45°
Hình ảnh 45° thực tế bao gồm một tập hợp các hình ảnh cho từng hướng chính (Bắc, Nam, Đông, Tây). Khi bản đồ của bạn hiển thị hình ảnh 45°, bạn có thể định hướng hình ảnh theo một trong các hướng chính bằng cách gọi setHeading() trên đối tượng Map, truyền một giá trị số được biểu thị bằng độ từ Bắc.
Ví dụ sau đây cho thấy một bản đồ trên không và bản đồ tự động xoay 3 giây một lần khi người dùng nhấp vào nút này:
TypeScript
let map: google.maps.Map;
function initMap(): void {
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
center: { lat: 40.76, lng: -73.983 },
zoom: 15,
mapTypeId: "satellite",
heading: 90,
tilt: 45,
});
// add listener to button
document.getElementById("rotate")!.addEventListener("click", autoRotate);
}
function rotate90(): void {
const heading = map.getHeading() || 0;
map.setHeading(heading + 90);
}
function autoRotate(): void {
// Determine if we're showing aerial imagery.
if (map.getTilt() !== 0) {
window.setInterval(rotate90, 3000);
}
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 40.76, lng: -73.983 },
zoom: 15,
mapTypeId: "satellite",
heading: 90,
tilt: 45,
});
// add listener to button
document.getElementById("rotate").addEventListener("click", autoRotate);
}
function rotate90() {
const heading = map.getHeading() || 0;
map.setHeading(heading + 90);
}
function autoRotate() {
// Determine if we're showing aerial imagery.
if (map.getTilt() !== 0) {
window.setInterval(rotate90, 3000);
}
}
window.initMap = initMap;
Thử mẫu
Sửa đổi Hệ thống đăng ký loại bản đồ
mapTypeId của tệp ánh xạ là giá trị nhận dạng chuỗi dùng để liên kết MapType với một giá trị duy nhất. Mỗi đối tượng Map duy trì một MapTypeRegistry chứa tập hợp MapType có sẵn cho bản đồ đó. Ví dụ: Sổ đăng ký này
dùng để chọn các loại bản đồ có sẵn trong
thành phần điều khiển MapType của Bản đồ.
Bạn không đọc trực tiếp từ sổ đăng ký loại bản đồ. Thay vào đó, bạn có thể sửa đổi sổ đăng ký bằng cách thêm các loại bản đồ tuỳ chỉnh và liên kết chúng với một giá trị nhận dạng chuỗi mà bạn chọn. Bạn không thể sửa đổi hoặc thay đổi các loại bản đồ cơ bản (mặc dù bạn có thể xoá chúng khỏi bản đồ bằng cách thay đổi giao diện của mapTypeControlOptions được liên kết của bản đồ).
Mã sau đây thiết lập bản đồ để chỉ hiển thị hai loại bản đồ trong mapTypeControlOptions của bản đồ và sửa đổi sổ đăng ký để thêm mối liên kết với giá trị nhận dạng này vào phương thức triển khai thực tế của giao diện MapType.
// Modify the control to only display two maptypes, the
// default ROADMAP and the custom 'mymap'.
// Note that because this is an association, we
// don't need to modify the MapTypeRegistry beforehand.
var MY_MAPTYPE_ID = 'mymaps';
var mapOptions = {
zoom: 12,
center: brooklyn,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
// Create our map. This creation will implicitly create a
// map type registry.
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
// Create your custom map type using your own code.
// (See below.)
var myMapType = new MyMapType();
// Set the registry to associate 'mymap' with the
// custom map type we created, and set the map to
// show that map type.
map.mapTypes.set(MY_MAPTYPE_ID, myMapType);
Bản đồ được tạo mẫu
StyledMapType cho phép bạn tuỳ chỉnh cách trình bày của bản đồ cơ sở tiêu chuẩn của Google, thay đổi hình thức hiển thị trực quan của các phần tử đó (như đường đi, công viên và các khu vực đã xây dựng) để phản ánh một kiểu khác với kiểu được sử dụng trong loại bản đồ mặc định.
Để biết thêm thông tin về StyledMapType, hãy xem hướng dẫn về bản đồ được tạo kiểu.
Các loại bản đồ tuỳ chỉnh
API JavaScript của Maps hỗ trợ việc hiển thị và quản lý các loại bản đồ tuỳ chỉnh, cho phép bạn triển khai hình ảnh bản đồ hoặc lớp phủ ô của riêng mình.
Có một số cách triển khai loại bản đồ có thể có trong API Maps JavaScript:
- Nhóm ô chuẩn bao gồm các hình ảnh tổng hợp thành bản đồ bản đồ đầy đủ. Các tập hợp thẻ thông tin này còn được gọi là loại bản đồ cơ sở. Các loại bản đồ này
hoạt động và hoạt động giống như các loại bản đồ mặc định hiện có:
roadmap,satellite,hybridvàterrain. Bạn có thể thêm loại bản đồ tuỳ chỉnh vào mảngmapTypescủa Bản đồ để cho phép giao diện người dùng trong API JavaScript của Maps coi loại bản đồ tuỳ chỉnh đó là một loại bản đồ chuẩn (ví dụ: bằng cách đưa loại bản đồ đó vào tuỳ chọn điều khiển MapType). - Lớp phủ ô hình ảnh hiển thị trên các loại bản đồ cơ sở hiện có. Nhìn chung, các loại bản đồ này được dùng để tăng cường một loại bản đồ hiện có nhằm hiển thị thêm thông tin và thường bị hạn chế ở các vị trí và/hoặc mức thu phóng cụ thể. Lưu ý rằng những ô này có thể trong suốt, cho phép bạn thêm đối tượng vào bản đồ hiện có.
- Các loại bản đồ không phải hình ảnh, cho phép bạn điều khiển việc hiển thị thông tin bản đồ ở cấp cơ bản nhất.
Mỗi tuỳ chọn này đều dựa trên việc tạo một lớp giúp triển khai giao diện MapType. Ngoài ra, lớp
ImageMapType sẽ cung cấp một số hành vi tích hợp sẵn để đơn giản hoá việc tạo loại bản đồ hình ảnh.
Giao diện MapType
Trước khi tạo các lớp triển khai MapType, bạn cần hiểu cách Google Maps xác định toạ độ và quyết định phần nào trên bản đồ sẽ hiển thị. Bạn cần triển khai logic tương tự cho mọi loại bản đồ cơ sở hoặc lớp phủ.
Đọc hướng dẫn về bản đồ và toạ độ ô.
Các loại bản đồ tuỳ chỉnh phải triển khai giao diện
MapType. Giao diện này chỉ định một số thuộc tính và phương thức cho phép API gửi yêu cầu đối với(các) loại bản đồ của bạn khi API xác định rằng cần hiển thị các ô bản đồ trong khung nhìn và mức thu phóng hiện tại. Bạn xử lý các yêu cầu này để quyết định thẻ thông tin nào cần tải.
Lưu ý: Bạn có thể tạo lớp của riêng mình để triển khai giao diện này. Ngoài ra, nếu có hình ảnh tương thích, bạn có thể sử dụng lớp
ImageMapType đã triển khai giao diện này.
Các lớp triển khai giao diện MapType
yêu cầu bạn phải xác định và điền sẵn các thuộc tính sau:
tileSize(bắt buộc) chỉ định kích thước của thẻ thông tin (loạigoogle.maps.Size). Kích thước phải là hình chữ nhật mặc dù không cần phải là hình vuông.maxZoom(bắt buộc) chỉ định mức thu phóng tối đa để hiển thị các ô thuộc loại bản đồ này.minZoom(không bắt buộc) chỉ định mức thu phóng tối thiểu để hiển thị ô của loại bản đồ này. Theo mặc định, giá trị này là0cho biết không tồn tại mức thu phóng tối thiểu nào.name(không bắt buộc) chỉ định tên cho loại bản đồ này. Thuộc tính này chỉ cần thiết nếu bạn muốn có thể chọn loại bản đồ này trong thành phần điều khiển MapType. (Xem phần Thêm các chế độ điều khiểnMapTypeở bên dưới.)alt(không bắt buộc) chỉ định văn bản thay thế cho loại bản đồ này, được biểu thị dưới dạng văn bản di chuột. Thuộc tính này chỉ cần thiết nếu bạn muốn loại bản đồ này có thể chọn được trong thành phần điều khiển MapType. (Xem phần Thêm các chế độ điều khiểnMapTypeở bên dưới.)
Ngoài ra, các lớp triển khai giao diện MapType cần triển khai các phương thức sau:
-
getTile()(bắt buộc) được gọi bất cứ khi nào API xác định rằng bản đồ cần hiển thị các ô mới cho một khung nhìn nhất định. Phương thứcgetTile()phải có chữ ký sau:getTile(tileCoord:Point,zoom:number,ownerDocument:Document):NodeAPI này xác định xem có cần gọi
getTile()hay không dựa trên các thuộc tínhtileSize,minZoomvàmaxZoomcủaMapType, cũng như mức thu phóng và khung nhìn hiện tại của bản đồ. Trình xử lý cho phương thức này sẽ trả về một phần tử HTML dựa trên toạ độ, mức thu phóng và phần tử DOM đã chuyển để thêm hình ảnh thẻ thông tin. -
releaseTile()(không bắt buộc) được gọi bất cứ khi nào API xác định rằng bản đồ cần xoá một thẻ thông tin khi nằm ngoài khung hiển thị. Phương thức này phải có chữ ký sau:releaseTile(tile:Node)Thông thường, bạn nên xử lý việc xoá mọi phần tử được đính kèm vào các ô bản đồ khi thêm vào bản đồ. Ví dụ: nếu đã đính kèm trình nghe sự kiện để ánh xạ các lớp phủ thẻ thông tin, thì bạn nên xoá các lớp đó tại đây.
Phương thức getTile() đóng vai trò là trình kiểm soát chính để xác định thẻ thông tin nào sẽ tải trong một khung nhìn nhất định.
Các loại bản đồ cơ sở
Các loại bản đồ mà bạn tạo theo cách này có thể đứng độc lập hoặc kết hợp với các loại bản đồ khác dưới dạng lớp phủ. Loại bản đồ độc lập được gọi là loại bản đồ cơ sở. Bạn nên yêu cầu API xử lý các MapType tuỳ chỉnh đó giống như bất kỳ loại bản đồ cơ sở hiện có nào khác (ROADMAP, TERRAIN, v.v.). Để thực hiện việc này, hãy thêm MapType tuỳ chỉnh vào thuộc tính mapTypes của Map. Thuộc tính này thuộc loại MapTypeRegistry.
Mã sau đây sẽ tạo một MapType cơ sở để hiển thị toạ độ thẻ thông tin của bản đồ và vẽ đường viền của thẻ thông tin:
TypeScript
/*
* This demo demonstrates how to replace default map tiles with custom imagery.
* In this case, the CoordMapType displays gray tiles annotated with the tile
* coordinates.
*
* Try panning and zooming the map to see how the coordinates change.
*/
class CoordMapType {
tileSize: google.maps.Size;
maxZoom = 19;
name = "Tile #s";
alt = "Tile Coordinate Map Type";
constructor(tileSize: google.maps.Size) {
this.tileSize = tileSize;
}
getTile(
coord: google.maps.Point,
zoom: number,
ownerDocument: Document
): HTMLElement {
const div = ownerDocument.createElement("div");
div.innerHTML = String(coord);
div.style.width = this.tileSize.width + "px";
div.style.height = this.tileSize.height + "px";
div.style.fontSize = "10";
div.style.borderStyle = "solid";
div.style.borderWidth = "1px";
div.style.borderColor = "#AAAAAA";
div.style.backgroundColor = "#E5E3DF";
return div;
}
releaseTile(tile: HTMLElement): void {}
}
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 10,
center: { lat: 41.85, lng: -87.65 },
streetViewControl: false,
mapTypeId: "coordinate",
mapTypeControlOptions: {
mapTypeIds: ["coordinate", "roadmap"],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
},
}
);
map.addListener("maptypeid_changed", () => {
const showStreetViewControl =
(map.getMapTypeId() as string) !== "coordinate";
map.setOptions({
streetViewControl: showStreetViewControl,
});
});
// Now attach the coordinate map type to the map's registry.
map.mapTypes.set(
"coordinate",
new CoordMapType(new google.maps.Size(256, 256))
);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
/*
* This demo demonstrates how to replace default map tiles with custom imagery.
* In this case, the CoordMapType displays gray tiles annotated with the tile
* coordinates.
*
* Try panning and zooming the map to see how the coordinates change.
*/
class CoordMapType {
tileSize;
maxZoom = 19;
name = "Tile #s";
alt = "Tile Coordinate Map Type";
constructor(tileSize) {
this.tileSize = tileSize;
}
getTile(coord, zoom, ownerDocument) {
const div = ownerDocument.createElement("div");
div.innerHTML = String(coord);
div.style.width = this.tileSize.width + "px";
div.style.height = this.tileSize.height + "px";
div.style.fontSize = "10";
div.style.borderStyle = "solid";
div.style.borderWidth = "1px";
div.style.borderColor = "#AAAAAA";
div.style.backgroundColor = "#E5E3DF";
return div;
}
releaseTile(tile) {}
}
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 10,
center: { lat: 41.85, lng: -87.65 },
streetViewControl: false,
mapTypeId: "coordinate",
mapTypeControlOptions: {
mapTypeIds: ["coordinate", "roadmap"],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
},
});
map.addListener("maptypeid_changed", () => {
const showStreetViewControl = map.getMapTypeId() !== "coordinate";
map.setOptions({
streetViewControl: showStreetViewControl,
});
});
// Now attach the coordinate map type to the map's registry.
map.mapTypes.set(
"coordinate",
new CoordMapType(new google.maps.Size(256, 256)),
);
}
window.initMap = initMap;
Thử mẫu
Loại bản đồ lớp phủ
Một số loại bản đồ được thiết kế để hoạt động trên các loại bản đồ hiện có. Những loại bản đồ như vậy có thể có các lớp trong suốt cho biết các địa điểm yêu thích hoặc hiển thị dữ liệu bổ sung cho người dùng.
Trong những trường hợp này, bạn không muốn loại bản đồ được coi là một thực thể riêng biệt mà là một lớp phủ.
Bạn có thể thực hiện việc này bằng cách trực tiếp thêm loại bản đồ vào MapType hiện có bằng cách sử dụng thuộc tính overlayMapTypes của Map. Thuộc tính này chứa MVCArray của MapType. Tất cả các loại bản đồ (cơ sở và lớp phủ) đều được kết xuất trong lớp mapPane. Các loại bản đồ lớp phủ sẽ hiển thị phía trên bản đồ cơ sở mà chúng được đính kèm, theo thứ tự xuất hiện trong mảng Map.overlayMapTypes (các lớp phủ có giá trị chỉ mục cao hơn sẽ hiển thị trước lớp phủ có giá trị chỉ mục thấp hơn).
Ví dụ sau giống với ví dụ trước, ngoại trừ việc chúng tôi đã tạo một lớp phủ ô MapType ở trên loại bản đồ ROADMAP:
TypeScript
/*
* This demo illustrates the coordinate system used to display map tiles in the
* API.
*
* Tiles in Google Maps are numbered from the same origin as that for
* pixels. For Google's implementation of the Mercator projection, the origin
* tile is always at the northwest corner of the map, with x values increasing
* from west to east and y values increasing from north to south.
*
* Try panning and zooming the map to see how the coordinates change.
*/
class CoordMapType implements google.maps.MapType {
tileSize: google.maps.Size;
alt: string|null = null;
maxZoom: number = 17;
minZoom: number = 0;
name: string|null = null;
projection: google.maps.Projection|null = null;
radius: number = 6378137;
constructor(tileSize: google.maps.Size) {
this.tileSize = tileSize;
}
getTile(
coord: google.maps.Point,
zoom: number,
ownerDocument: Document
): HTMLElement {
const div = ownerDocument.createElement("div");
div.innerHTML = String(coord);
div.style.width = this.tileSize.width + "px";
div.style.height = this.tileSize.height + "px";
div.style.fontSize = "10";
div.style.borderStyle = "solid";
div.style.borderWidth = "1px";
div.style.borderColor = "#AAAAAA";
return div;
}
releaseTile(tile: Element): void {}
}
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 10,
center: { lat: 41.85, lng: -87.65 },
}
);
// Insert this overlay map type as the first overlay map type at
// position 0. Note that all overlay map types appear on top of
// their parent base map.
const coordMapType = new CoordMapType(new google.maps.Size(256, 256))
map.overlayMapTypes.insertAt(
0,
coordMapType
);
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
/*
* This demo illustrates the coordinate system used to display map tiles in the
* API.
*
* Tiles in Google Maps are numbered from the same origin as that for
* pixels. For Google's implementation of the Mercator projection, the origin
* tile is always at the northwest corner of the map, with x values increasing
* from west to east and y values increasing from north to south.
*
* Try panning and zooming the map to see how the coordinates change.
*/
class CoordMapType {
tileSize;
alt = null;
maxZoom = 17;
minZoom = 0;
name = null;
projection = null;
radius = 6378137;
constructor(tileSize) {
this.tileSize = tileSize;
}
getTile(coord, zoom, ownerDocument) {
const div = ownerDocument.createElement("div");
div.innerHTML = String(coord);
div.style.width = this.tileSize.width + "px";
div.style.height = this.tileSize.height + "px";
div.style.fontSize = "10";
div.style.borderStyle = "solid";
div.style.borderWidth = "1px";
div.style.borderColor = "#AAAAAA";
return div;
}
releaseTile(tile) {}
}
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 10,
center: { lat: 41.85, lng: -87.65 },
});
// Insert this overlay map type as the first overlay map type at
// position 0. Note that all overlay map types appear on top of
// their parent base map.
const coordMapType = new CoordMapType(new google.maps.Size(256, 256));
map.overlayMapTypes.insertAt(0, coordMapType);
}
window.initMap = initMap;
Thử mẫu
Các loại bản đồ hình ảnh
Việc triển khai MapType để đóng vai trò là loại bản đồ cơ sở có thể tốn thời gian và công sức. API này cung cấp một lớp đặc biệt giúp triển khai giao diện MapType cho các loại bản đồ phổ biến nhất: loại bản đồ có các ô được tạo thành từ các tệp hình ảnh đơn lẻ.
Lớp này (lớp ImageMapType) được xây dựng bằng cách sử dụng thông số kỹ thuật của đối tượng ImageMapTypeOptions để xác định các thuộc tính bắt buộc sau đây:
tileSize(bắt buộc) chỉ định kích thước của thẻ thông tin (loạigoogle.maps.Size). Kích thước phải là hình chữ nhật mặc dù không cần phải là hình vuông.getTileUrl(bắt buộc) chỉ định hàm, thường được cung cấp dưới dạng giá trị cố định của hàm cùng dòng, để xử lý việc lựa chọn thẻ thông tin hình ảnh thích hợp dựa trên toạ độ thế giới và mức thu phóng được cung cấp.
Mã sau đây triển khai ImageMapType cơ bản bằng cách sử dụng thẻ thông tin mặt trăng của Google. Ví dụ này sử dụng hàm chuẩn hoá để đảm bảo rằng các ô lặp lại dọc theo trục x, chứ không dọc theo trục y của bản đồ.
TypeScript
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
center: { lat: 0, lng: 0 },
zoom: 1,
streetViewControl: false,
mapTypeControlOptions: {
mapTypeIds: ["moon"],
},
}
);
const moonMapType = new google.maps.ImageMapType({
getTileUrl: function (coord, zoom): string {
const normalizedCoord = getNormalizedCoord(coord, zoom);
if (!normalizedCoord) {
return "";
}
const bound = Math.pow(2, zoom);
return (
"https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
"/" +
zoom +
"/" +
normalizedCoord.x +
"/" +
(bound - normalizedCoord.y - 1) +
".jpg"
);
},
tileSize: new google.maps.Size(256, 256),
maxZoom: 9,
minZoom: 0,
// @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions'
radius: 1738000,
name: "Moon",
});
map.mapTypes.set("moon", moonMapType);
map.setMapTypeId("moon");
}
// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
const y = coord.y;
let x = coord.x;
// tile range in one direction range is dependent on zoom level
// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
const tileRange = 1 << zoom;
// don't repeat across y-axis (vertically)
if (y < 0 || y >= tileRange) {
return null;
}
// repeat across x-axis
if (x < 0 || x >= tileRange) {
x = ((x % tileRange) + tileRange) % tileRange;
}
return { x: x, y: y };
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 0, lng: 0 },
zoom: 1,
streetViewControl: false,
mapTypeControlOptions: {
mapTypeIds: ["moon"],
},
});
const moonMapType = new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
const normalizedCoord = getNormalizedCoord(coord, zoom);
if (!normalizedCoord) {
return "";
}
const bound = Math.pow(2, zoom);
return (
"https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
"/" +
zoom +
"/" +
normalizedCoord.x +
"/" +
(bound - normalizedCoord.y - 1) +
".jpg"
);
},
tileSize: new google.maps.Size(256, 256),
maxZoom: 9,
minZoom: 0,
// @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions'
radius: 1738000,
name: "Moon",
});
map.mapTypes.set("moon", moonMapType);
map.setMapTypeId("moon");
}
// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
const y = coord.y;
let x = coord.x;
// tile range in one direction range is dependent on zoom level
// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
const tileRange = 1 << zoom;
// don't repeat across y-axis (vertically)
if (y < 0 || y >= tileRange) {
return null;
}
// repeat across x-axis
if (x < 0 || x >= tileRange) {
x = ((x % tileRange) + tileRange) % tileRange;
}
return { x: x, y: y };
}
window.initMap = initMap;
Thử mẫu
Dự đoán
Trái đất là một hình cầu ba chiều (khoảng), trong khi bản đồ là một bề mặt hai chiều phẳng. Bản đồ mà bạn thấy trong API JavaScript của Maps, giống như bất kỳ bản đồ phẳng nào của Trái đất, là hình chiếu của hình cầu lên một bề mặt phẳng. Nói một cách đơn giản nhất, phép chiếu có thể được định nghĩa là việc tạo ánh xạ các giá trị vĩ độ/kinh độ với toạ độ trên bản đồ của phép chiếu.
Các phép chiếu trong API JavaScript của Maps phải triển khai giao diện Projection. Quá trình triển khai Projection không chỉ cung cấp ánh xạ từ hệ toạ độ này sang hệ toạ độ khác mà còn phải cung cấp ánh xạ hai chiều. Tức là bạn phải xác định cách chuyển đổi từ toạ độ Earth (đối tượng LatLng) sang hệ thống toạ độ thế giới của lớp Projection và ngược lại. Google Maps sử dụng phép chiếu Lookerr để tạo bản đồ từ dữ liệu địa lý và chuyển đổi các sự kiện trên bản đồ thành toạ độ địa lý. Bạn có thể có được phép chiếu này bằng cách gọi getProjection() trên Map (hoặc bất kỳ loại MapType cơ sở tiêu chuẩn nào). Đối với hầu hết các trường hợp, Projection tiêu chuẩn này là đủ, nhưng bạn cũng có thể xác định và sử dụng các phép chiếu tuỳ chỉnh của riêng mình.
Triển khai phép chiếu
Khi triển khai một phép chiếu tuỳ chỉnh, bạn sẽ cần xác định một vài điều sau:
- Công thức để ánh xạ toạ độ vĩ độ và kinh độ vào mặt phẳng Descartes và ngược lại. (Giao diện
Projectionchỉ hỗ trợ các phép biến đổi thành toạ độ trực tuyến.) - Kích thước thẻ thông tin cơ bản. Tất cả các ô phải là hình chữ nhật.
- "kích thước thế giới" của bản đồ bằng cách sử dụng ô cơ sở được đặt ở mức thu phóng 0. Lưu ý rằng đối với bản đồ bao gồm một ô ở mức thu phóng 0, kích thước thế giới và kích thước ô cơ sở là giống nhau.
Chuyển đổi toạ độ trong phép chiếu
Mỗi phép chiếu cung cấp hai phương thức dịch giữa hai hệ toạ độ này, cho phép bạn chuyển đổi giữa toạ độ địa lý và toạ độ thế giới:
- Phương thức
Projection.fromLatLngToPoint()chuyển đổi giá trịLatLngthành toạ độ thế giới. Phương thức này được dùng để định vị các lớp phủ trên bản đồ (và để định vị chính bản đồ). - Phương thức
Projection.fromPointToLatLng()chuyển đổi toạ độ thế giới thành giá trịLatLng. Phương thức này được dùng để chuyển đổi các sự kiện như lượt nhấp xảy ra trên bản đồ thành toạ độ địa lý.
Google Maps giả định rằng các phép chiếu là trực tuyến.
Nhìn chung, bạn có thể sử dụng phép chiếu trong hai trường hợp: để tạo bản đồ thế giới hoặc tạo bản đồ về một khu vực địa phương. Trong trường hợp trước, bạn nên đảm bảo rằng hình chiếu của bạn cũng trực tuyến và bình thường ở mọi kinh độ. Một số phép chiếu (đặc biệt là phép chiếu hình conic) có thể là "bình thường cục bộ" (tức là điểm phía bắc) nhưng lệch khỏi phía bắc thực; ví dụ: bản đồ càng được định vị ở vị trí tương đối so với kinh độ tham chiếu nào đó. Bạn có thể sử dụng phép chiếu như vậy cục bộ, nhưng hãy lưu ý rằng phép chiếu đó nhất thiết không chính xác và lỗi chuyển đổi sẽ ngày càng xuất hiện nhiều hơn so với kinh độ tham chiếu mà bạn chệch.
Lựa chọn ô bản đồ trong phép chiếu
Phép chiếu không chỉ hữu ích cho việc xác định vị trí của vị trí hoặc lớp phủ, mà còn giúp định vị các ô bản đồ.
API JavaScript của Maps kết xuất bản đồ cơ sở bằng giao diện MapType. Giao diện này phải khai báo cả thuộc tính projection để xác định phép chiếu của bản đồ và phương thức getTile() để truy xuất ô bản đồ dựa trên giá trị tọa độ ô. Toạ độ ô dựa trên cả kích thước ô cơ bản (phải là hình chữ nhật) và "kích thước thế giới" của bản đồ (tức là kích thước pixel của bản đồ thế giới ở mức thu phóng 0). (Đối với các bản đồ chứa một thẻ thông tin ở mức thu phóng 0, kích thước thẻ thông tin và kích thước bản đồ giống hệt nhau.)
Bạn xác định kích thước thẻ thông tin cơ sở trong thuộc tính tileSize của MapType. Bạn sẽ ngầm xác định kích thước thế giới trong các phương thức fromLatLngToPoint() và fromPointToLatLng() của phép chiếu.
Vì việc lựa chọn hình ảnh phụ thuộc vào các giá trị được truyền này, nên bạn nên đặt tên cho những hình ảnh có thể chọn theo phương thức lập trình dựa trên các giá trị đã chuyển đó, chẳng hạn như map_zoom_tileX_tileY.png.
Ví dụ sau đây xác định ImageMapType sử dụng phép chiếu
Gall-Peters:
TypeScript
// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection
function initMap(): void {
// Create a map. Use the Gall-Peters map type.
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 0,
center: { lat: 0, lng: 0 },
mapTypeControl: false,
}
);
initGallPeters();
map.mapTypes.set("gallPeters", gallPetersMapType);
map.setMapTypeId("gallPeters");
// Show the lat and lng under the mouse cursor.
const coordsDiv = document.getElementById("coords") as HTMLElement;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
map.addListener("mousemove", (event: google.maps.MapMouseEvent) => {
coordsDiv.textContent =
"lat: " +
Math.round(event.latLng!.lat()) +
", " +
"lng: " +
Math.round(event.latLng!.lng());
});
// Add some markers to the map.
map.data.setStyle((feature) => {
return {
title: feature.getProperty("name"),
optimized: false,
};
});
map.data.addGeoJson(cities);
}
let gallPetersMapType;
function initGallPeters() {
const GALL_PETERS_RANGE_X = 800;
const GALL_PETERS_RANGE_Y = 512;
// Fetch Gall-Peters tiles stored locally on our server.
gallPetersMapType = new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
const scale = 1 << zoom;
// Wrap tiles horizontally.
const x = ((coord.x % scale) + scale) % scale;
// Don't wrap tiles vertically.
const y = coord.y;
if (y < 0 || y >= scale) return "";
return (
"https://developers.google.com/maps/documentation/" +
"javascript/examples/full/images/gall-peters_" +
zoom +
"_" +
x +
"_" +
y +
".png"
);
},
tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
minZoom: 0,
maxZoom: 1,
name: "Gall-Peters",
});
// Describe the Gall-Peters projection used by these tiles.
gallPetersMapType.projection = {
fromLatLngToPoint: function (latLng) {
const latRadians = (latLng.lat() * Math.PI) / 180;
return new google.maps.Point(
GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians))
);
},
fromPointToLatLng: function (point, noWrap) {
const x = point.x / GALL_PETERS_RANGE_X;
const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));
return new google.maps.LatLng(
(Math.asin(1 - 2 * y) * 180) / Math.PI,
-180 + 360 * x,
noWrap
);
},
};
}
// GeoJSON, describing the locations and names of some cities.
const cities = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: { type: "Point", coordinates: [-87.65, 41.85] },
properties: { name: "Chicago" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [-149.9, 61.218] },
properties: { name: "Anchorage" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [-99.127, 19.427] },
properties: { name: "Mexico City" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [-0.126, 51.5] },
properties: { name: "London" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [28.045, -26.201] },
properties: { name: "Johannesburg" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [15.322, -4.325] },
properties: { name: "Kinshasa" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [151.207, -33.867] },
properties: { name: "Sydney" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [0, 0] },
properties: { name: "0°N 0°E" },
},
],
};
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// This example defines an image map type using the Gall-Peters
// projection.
// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection
function initMap() {
// Create a map. Use the Gall-Peters map type.
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 0,
center: { lat: 0, lng: 0 },
mapTypeControl: false,
});
initGallPeters();
map.mapTypes.set("gallPeters", gallPetersMapType);
map.setMapTypeId("gallPeters");
// Show the lat and lng under the mouse cursor.
const coordsDiv = document.getElementById("coords");
map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv);
map.addListener("mousemove", (event) => {
coordsDiv.textContent =
"lat: " +
Math.round(event.latLng.lat()) +
", " +
"lng: " +
Math.round(event.latLng.lng());
});
// Add some markers to the map.
map.data.setStyle((feature) => {
return {
title: feature.getProperty("name"),
optimized: false,
};
});
map.data.addGeoJson(cities);
}
let gallPetersMapType;
function initGallPeters() {
const GALL_PETERS_RANGE_X = 800;
const GALL_PETERS_RANGE_Y = 512;
// Fetch Gall-Peters tiles stored locally on our server.
gallPetersMapType = new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
const scale = 1 << zoom;
// Wrap tiles horizontally.
const x = ((coord.x % scale) + scale) % scale;
// Don't wrap tiles vertically.
const y = coord.y;
if (y < 0 || y >= scale) return "";
return (
"https://developers.google.com/maps/documentation/" +
"javascript/examples/full/images/gall-peters_" +
zoom +
"_" +
x +
"_" +
y +
".png"
);
},
tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
minZoom: 0,
maxZoom: 1,
name: "Gall-Peters",
});
// Describe the Gall-Peters projection used by these tiles.
gallPetersMapType.projection = {
fromLatLngToPoint: function (latLng) {
const latRadians = (latLng.lat() * Math.PI) / 180;
return new google.maps.Point(
GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians)),
);
},
fromPointToLatLng: function (point, noWrap) {
const x = point.x / GALL_PETERS_RANGE_X;
const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));
return new google.maps.LatLng(
(Math.asin(1 - 2 * y) * 180) / Math.PI,
-180 + 360 * x,
noWrap,
);
},
};
}
// GeoJSON, describing the locations and names of some cities.
const cities = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: { type: "Point", coordinates: [-87.65, 41.85] },
properties: { name: "Chicago" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [-149.9, 61.218] },
properties: { name: "Anchorage" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [-99.127, 19.427] },
properties: { name: "Mexico City" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [-0.126, 51.5] },
properties: { name: "London" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [28.045, -26.201] },
properties: { name: "Johannesburg" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [15.322, -4.325] },
properties: { name: "Kinshasa" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [151.207, -33.867] },
properties: { name: "Sydney" },
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [0, 0] },
properties: { name: "0°N 0°E" },
},
],
};
window.initMap = initMap;