Thông báo bảo mật: Chúng tôi đã nhận thấy một vấn đề bảo mật có thể ảnh hưởng đến các trang web sử dụng các thư viện cụ thể của bên thứ ba (bao gồm cả polyfill.io). Vấn đề này đôi khi có thể chuyển hướng khách truy cập khỏi trang web mong muốn mà chủ sở hữu trang web không biết hoặc không cho phép. Nhiều mẫu JavaScript của chúng tôi trước đây đã bao gồm phần khai báo tập lệnh polyfill.io
. Chúng tôi đã xoá phương thức này khỏi các mẫu của mình. Nếu đã sử dụng các mẫu JavaScript có chứa nội dung khai báo này, bạn nên xoá nội dung khai báo.
API JavaScript của Maps phiên bản 2 không còn hoạt động kể từ ngày 26 tháng 5 năm 2021. Do đó, các bản đồ v2 của trang web sẽ ngừng hoạt động và sẽ trả về lỗi JavaScript. Để tiếp tục sử dụng bản đồ trên trang web của bạn, hãy chuyển sang Maps JavaScript API phiên bản 3. Hướng dẫn này sẽ giúp bạn trong suốt quá trình này.
Tổng quan
Mỗi ứng dụng sẽ có quy trình di chuyển hơi khác nhau. Tuy nhiên, có một số bước chung dành cho tất cả dự án:
- Mua khoá mới. API JavaScript của Maps hiện sử dụng
Google Cloud Console để quản lý khoá. Nếu bạn vẫn đang sử dụng khoá phiên bản 2, hãy nhớ lấy khoá API mới trước khi bắt đầu quá trình di chuyển.
- Cập nhật API Tự khởi động. Hầu hết ứng dụng sẽ tải
API JavaScript của Maps phiên bản 3 bằng mã sau:
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
- Cập nhật mã. Lượng thay đổi cần thiết sẽ
tuỳ thuộc nhiều vào hồ sơ đăng ký của bạn. Sau đây là một số thay đổi phổ biến:
- Luôn tham chiếu không gian tên google.maps. Trong phiên bản 3, tất cả các mã API JavaScript của Maps đều được lưu trữ trong không gian tên
google.maps.*
thay vì không gian tên chung. Hầu hết các đối tượng cũng đã được đổi tên trong quá trình này. Ví dụ: thay vì GMap2
, bây giờ bạn sẽ tải google.maps.Map
.
- Xoá mọi tham chiếu đến các phương thức lỗi thời. Một số phương thức tiện ích mục đích chung đã bị xoá, chẳng hạn như
GDownloadURL
và GLog
.
Hãy thay thế chức năng này bằng các thư viện tiện ích của bên thứ ba hoặc xoá các tệp tham chiếu này khỏi mã của bạn.
- (Không bắt buộc) Thêm thư viện vào đoạn mã của bạn. Nhiều tính năng đã được tách riêng vào thư viện tiện ích để mỗi ứng dụng sẽ chỉ phải tải các phần của API sẽ được dùng.
- (Không bắt buộc) Định cấu hình dự án để sử dụng các tiện ích bên ngoài v3.
Bạn có thể sử dụng các bên ngoài v3 để xác thực mã bằng Trình biên dịch đóng hoặc để kích hoạt tính năng tự động hoàn thành trong IDE.
Tìm hiểu thêm về
Chế độ biên dịch nâng cao và máy tính bên ngoài.
- Thử nghiệm và lặp lại. Tại thời điểm này, bạn vẫn còn
một số việc cần làm, nhưng tin vui là bạn sẽ làm tốt công việc
để sử dụng ứng dụng bản đồ mới phiên bản 3!
Các thay đổi trong phiên bản 3 của API Maps JavaScript
Trước khi lên kế hoạch di chuyển, bạn nên dành thời gian để tìm hiểu sự khác biệt giữa API JavaScript Maps phiên bản 2 và API JavaScript Maps phiên bản 3. Phiên bản mới nhất của API JavaScript trên Maps đã được viết từ đầu, tập trung vào các kỹ thuật lập trình JavaScript hiện đại, tăng cường sử dụng thư viện và đơn giản hoá API.
Nhiều tính năng mới đã được thêm vào API và một số tính năng quen thuộc đã được thay đổi hoặc thậm chí bị xoá. Phần này nêu bật một số điểm khác biệt chính giữa 2 bản phát hành này.
Sau đây là một số thay đổi trong API phiên bản 3:
- Thư viện lõi đơn giản. Nhiều hàm bổ sung đã được chuyển vào thư viện, giúp giảm thời gian tải và phân tích cú pháp cho Core API, giúp bản đồ của bạn tải nhanh trên mọi thiết bị.
- Cải thiện hiệu suất của một số tính năng, chẳng hạn như hiển thị đa giác và vị trí điểm đánh dấu.
- Phương pháp mới đối với hạn mức sử dụng phía máy khách nhằm đáp ứng tốt hơn các địa chỉ dùng chung được proxy di động và tường lửa của công ty sử dụng.
- Thêm tính năng hỗ trợ cho một số trình duyệt hiện đại và trình duyệt dành cho thiết bị di động. Internet Explorer 6 đã ngừng hỗ trợ.
- Xoá nhiều lớp trình trợ giúp đa năng (
GLog
hoặc
GDownloadUrl
). Hiện nay, có nhiều thư viện JavaScript xuất sắc cung cấp chức năng tương tự, chẳng hạn như Đóng hoặc jQuery.
- Triển khai Chế độ xem đường phố HTML5 sẽ tải trên bất kỳ thiết bị di động nào.
- Ảnh toàn cảnh
Chế độ xem đường phố tùy chỉnh với ảnh của riêng bạn, cho phép bạn chia sẻ
ảnh toàn cảnh về dốc trượt tuyết, nhà bán hoặc các địa điểm thú vị khác.
- Tuỳ chỉnh Bản đồ được tạo kiểu cho phép bạn thay đổi cách hiển thị các thành phần
trên bản đồ cơ sở để phù hợp với phong cách hình ảnh độc đáo của bạn.
- Hỗ trợ một số dịch vụ mới, chẳng hạn như ElevationService và Ma trận khoảng cách.
- Dịch vụ chỉ đường được cải tiến cung cấp các tuyến đường thay thế, tính năng tối ưu hoá tuyến đường (giải pháp gần đúng cho
vấn đề của nhân viên bán hàng đi lại), chỉ đường đi xe đạp (với
lớp đi xe đạp), chỉ đường phương tiện công cộng và
đường đi có thể kéo.
- Một định dạng mã hóa địa lý mới cập nhật của chúng tôi cung cấp thông tin loại chính xác hơn giá trị
accuracy
từ API mã hóa địa lý phiên bản 2.
- Hỗ trợ nhiều Cửa sổ thông tin trên một Bản đồ
Nâng cấp ứng dụng của bạn
Chìa khoá mới của bạn
API JavaScript của Maps phiên bản 3 sử dụng hệ thống khoá mới từ phiên bản 2. Có thể bạn đang sử dụng khoá v3 cho ứng dụng của mình. Trong trường hợp đó, bạn không cần thay đổi gì cả. Để xác minh, hãy kiểm tra URL nơi bạn tải API JavaScript Maps để tìm tham số key
. Nếu giá trị khoá bắt đầu bằng "ABQIAA", tức là bạn đang sử dụng khoá v2. Nếu có khoá v2, bạn phải nâng cấp lên khoá v3 trong quá trình di chuyển. Việc này sẽ:
Khoá được truyền khi tải Maps JavaScript API phiên bản 3.
Tìm hiểu thêm về cách tạo khoá API.
Xin lưu ý rằng nếu là khách hàng API Google Maps for Work, bạn có thể sử dụng ID ứng dụng khách với tham số client
thay vì sử dụng tham số key
. Mã ứng dụng khách vẫn được hỗ trợ trong API JavaScript Maps phiên bản 3 và không cần trải qua quá trình nâng cấp khoá.
Tải API
Nội dung sửa đổi đầu tiên bạn cần thực hiện đối với mã liên quan đến cách bạn tải API. Trong phiên bản 2, bạn tải API JavaScript của Maps thông qua một yêu cầu đến http://maps.google.com/maps
. Nếu đang tải Maps JavaScript API phiên bản 3, bạn sẽ cần thực hiện các thay đổi sau:
- Tải API từ
//maps.googleapis.com/maps/api/js
- Xoá tham số
file
.
- Cập nhật tham số
key
bằng khoá v3 mới. Khách hàng API Google Maps for Work nên sử dụng tham số client
.
- (Chỉ dành cho Gói cao cấp của Nền tảng Google Maps) Đảm bảo rằng tham số
client
được cung cấp như được giải thích trong
Hướng dẫn dành cho nhà phát triển về Gói cao cấp của Nền tảng Google Maps.
- Hãy xoá tham số
v
để yêu cầu phiên bản phát hành mới nhất hoặc thay đổi giá trị của phiên bản đó cho phù hợp với lược đồ tạo phiên bản v3.
- (Không bắt buộc) Thay thế tham số
hl
bằng
language
và giữ nguyên giá trị của tham số đó.
- (Không bắt buộc) Thêm tham số
libraries
để tải các thư viện không bắt buộc.
Trong trường hợp đơn giản nhất, quy trình tự khởi động v3 sẽ chỉ chỉ định tham số khoá API:
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
Ví dụ bên dưới yêu cầu phiên bản mới nhất của API JavaScript Maps phiên bản 2 bằng tiếng Đức:
<script src="//maps.google.com/maps?file=api&v=2.x&key=YOUR_API_KEY&hl=de"></script>
Dưới đây là ví dụ về một yêu cầu tương đương cho phiên bản 3.
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=de"></script>
Ra mắt không gian tên google.maps
Có lẽ thay đổi đáng chú ý nhất trong API JavaScript của Maps phiên bản 3 là việc giới thiệu không gian tên google.maps
. API v2 đặt tất cả đối tượng trong không gian tên chung theo mặc định. Điều này có thể dẫn đến xung đột khi đặt tên. Trong v3, mọi đối tượng đều nằm trong không gian tên google.maps
.
Khi di chuyển ứng dụng sang phiên bản 3, bạn sẽ phải thay đổi mã để
tận dụng không gian tên mới. Rất tiếc là việc tìm kiếm "G" và thay thế bằng "google.maps." sẽ không hoàn toàn hiệu quả; nhưng, đó là một nguyên tắc chung nên áp dụng khi xem xét mã của bạn. Dưới đây là một số ví dụ về các lớp tương đương trong v2 và v3.
v2 |
v3 |
GMap2 |
google.maps.Map |
GLatLng |
google.maps.LatLng |
GInfoWindow |
google.maps.InfoWindow |
GMapOptions |
google.map.MapOptions |
G_API_VERSION |
google.maps.version |
GPolyStyleOptions |
google.maps.PolygonOptions or
google.maps.PolylineOptions |
Xoá mã lỗi thời
API JavaScript của Maps phiên bản 3 có các chức năng tương đương trong hầu hết các chức năng trong phiên bản 2. Tuy nhiên, có một số lớp không còn được hỗ trợ nữa. Trong quá trình di chuyển, bạn nên thay thế các lớp này bằng thư viện tiện ích của bên thứ ba hoặc xoá các tệp tham chiếu này khỏi mã của mình. Tồn tại nhiều thư viện JavaScript xuất sắc cung cấp chức năng tương tự, chẳng hạn như Đóng hoặc jQuery.
Các lớp sau không có song song trong API JavaScript của Maps phiên bản 3:
GBounds | GLanguage |
GBrowserIsCompatible | GLayer |
GControl | GLog |
GControlAnchor | GMercatorProjection |
GControlImpl | GNavLabelControl |
GControlPosition | GObliqueMercator |
GCopyright | GOverlay |
GCopyrightCollection | GPhotoSpec |
GDownloadUrl | GPolyEditingOptions |
GDraggableObject | GScreenOverlay |
GDraggableObjectOptions | GStreetviewFeatures |
GFactualGeocodeCache | GStreetviewLocation |
GGeoAddressAccuracy | GStreetviewOverlay |
GGeocodeCache | GStreetviewUserPhotosOptions |
GGoogleBar | GTileLayerOptions |
GGoogleBarAdsOptions | GTileLayerOverlayOptions |
GGoogleBarLinkTarget | GTrafficOverlayOptions |
GGoogleBarListingTypes | GUnload |
GGoogleBarOptions | GXml |
GGoogleBarResultList | GXmlHttp |
GInfoWindowTab | GXslt |
GKeyboardHandler |
|
So sánh mã
Hãy so sánh hai ứng dụng được viết bằng API v2 và v3.
<!DOCTYPE html>
<html>
<head>
<script src="//maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY"></script>
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
<script>
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById('map'));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
map.addOverlay(new GMarker(new GLatLng(37.4419, -122.1419)));
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
<script>
function initialize() {
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.4419, -122.1419),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Như bạn có thể thấy, có một vài khác biệt giữa 2 ứng dụng này. Những thay đổi đáng chú ý bao gồm:
- Địa chỉ dùng để tải API đã thay đổi.
- Các phương thức
GBrowserIsCompatible()
và GUnload()
đã bị xoá khỏi API không còn cần thiết trong phiên bản 3 nữa.
- Đối tượng
GMap2
được thay thế bằng google.maps.Map
làm đối tượng trung tâm trong API.
- Các thuộc tính hiện được tải thông qua các lớp Tuỳ chọn. Trong ví dụ trên, chúng ta đặt 3 thuộc tính bắt buộc để tải bản đồ –
center
, zoom
và mapTypeId
– thông qua một đối tượng MapOptions
cùng dòng.
- Theo mặc định, giao diện người dùng được bật trong phiên bản 3. Bạn có thể tắt tính năng này bằng cách đặt thuộc tính
disableDefaultUI
thành true trong đối tượng MapOptions
.
Tóm tắt
Đến đây, bạn đã nắm được một số điểm chính liên quan đến việc di chuyển từ phiên bản 2 sang phiên bản 3 của API JavaScript Maps.
Bạn có thể cần biết thêm thông tin, nhưng thông tin đó sẽ phụ thuộc vào ứng dụng của bạn. Trong những phần sau, chúng tôi đã đưa ra hướng dẫn di chuyển cho những trường hợp cụ thể mà bạn có thể gặp phải. Ngoài ra, cũng có một số tài nguyên
có thể giúp ích cho bạn trong quá trình nâng cấp.
Nếu bạn có vấn đề hoặc có câu hỏi về bài viết này, vui lòng sử dụng đường liên kết GỬI PHẢN HỒI ở đầu trang này.
Tài liệu tham khảo chi tiết
Phần này cung cấp thông tin so sánh chi tiết về các tính năng phổ biến nhất cho cả phiên bản 2 và phiên bản 3 của API JavaScript của Maps. Mỗi phần của tài liệu tham khảo được thiết kế để người dùng đọc riêng. Bạn không nên đọc toàn bộ tài liệu tham khảo này. Thay vào đó, hãy sử dụng tài liệu này để hỗ trợ quá trình di chuyển theo từng trường hợp.
- Sự kiện – đăng ký và xử lý sự kiện.
- Thành phần điều khiển – thao tác với các thành phần điều khiển
điều hướng xuất hiện trên bản đồ.
- Lớp phủ – thêm và chỉnh sửa các đối tượng trên bản đồ.
- Loại bản đồ - các ô tạo nên bản đồ cơ sở.
- Lớp – thêm và chỉnh sửa nội dung theo nhóm, chẳng hạn như các lớp KML hoặc Lưu lượng truy cập.
- Dịch vụ – hoạt động với các dịch vụ mã hoá địa lý, chỉ đường hoặc Chế độ xem đường phố của Google.
Sự kiện
Mô hình sự kiện cho API JavaScript Maps phiên bản 3 cũng tương tự như mô hình được sử dụng trong phiên bản 2,
mặc dù về sau đã có nhiều thay đổi.
Sự kiện mới cho dịch vụ hỗ trợ MVC
API v3 thêm một loại sự kiện mới để phản ánh các thay đổi về trạng thái MVC. Hiện có 2 loại sự kiện:
- Sự kiện của người dùng (chẳng hạn như sự kiện nhấp chuột) được truyền từ DOM đến API Maps JavaScript. Những sự kiện này riêng biệt và
khác với các sự kiện DOM chuẩn.
- Thông báo về việc thay đổi trạng thái MVC phản ánh các thay đổi trong các đối tượng API Maps và được đặt tên theo quy ước
property_changed
.
Mỗi đối tượng của API Maps xuất một số sự kiện được đặt tên. Các ứng dụng quan tâm đến các sự kiện cụ thể phải đăng ký trình nghe sự kiện cho các sự kiện đó và thực thi mã khi nhận được các sự kiện đó. Cơ chế dựa trên sự kiện này là giống nhau trong cả API JavaScript của Maps phiên bản 2 và v3, ngoại trừ việc không gian tên đã thay đổi từ GEvent
thành google.maps.event
:
GEvent.addListener(map, 'click', function() {
alert('You clicked the map.');
});
google.maps.event.addListener(map, 'click', function() {
alert('You clicked the map.');
});
Xoá trình xử lý sự kiện
Vì lý do về hiệu suất, tốt nhất bạn nên xoá trình nghe sự kiện khi không còn cần đến trình nghe đó. Cách xoá trình nghe sự kiện hoạt động tương tự như trong v2 và v3:
- Khi bạn tạo một trình nghe sự kiện, một đối tượng mờ (GEventListener trong phiên bản 2, MapsEventListener trong phiên bản 3) sẽ được trả về.
- Khi bạn muốn xoá trình nghe sự kiện, hãy chuyển đối tượng này vào phương thức
removeListener()
(GEvent.removeListener()
trong v2 hoặc google.maps.event.removeListener()
trong v3) để xoá trình nghe sự kiện.
Nghe sự kiện DOM
Nếu bạn muốn thu thập và phản hồi các sự kiện DOM (Mô hình đối tượng tài liệu), v3 sẽ cung cấp phương thức tĩnh google.maps.event.addDomListener()
, tương đương với phương thức GEvent.addDomListener()
trong phiên bản 2.
Sử dụng các đối số đã truyền trong sự kiện
Các sự kiện giao diện người dùng thường truyền một đối số sự kiện. Sau đó, trình nghe sự kiện có thể truy cập vào đối số này. Hầu hết các đối số sự kiện trong phiên bản 3 đã được đơn giản hoá để nhất quán hơn so với các đối tượng trong API. (Xem Tài liệu tham khảo phiên bản 3 để biết thông tin chi tiết.)
Không có đối số overlay
trong trình nghe sự kiện v3. Nếu bạn đăng ký một sự kiện click
trên bản đồ v3, thì lệnh gọi lại sẽ chỉ xảy ra khi người dùng nhấp vào bản đồ cơ sở. Bạn có thể đăng ký thêm lệnh gọi lại trên lớp phủ có thể nhấp nếu cần phản ứng với những lượt nhấp đó.
// Passes an overlay argument when clicking on a map
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();
GEvent.addListener(map,'click', function(overlay, latlng) {
if (latlng) {
var marker = new GMarker(latlng);
map.addOverlay(marker);
}
});
// Passes only an event argument
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
Các chế độ kiểm soát
API JavaScript của Maps hiển thị các điều khiển giao diện người dùng cho phép người dùng tương tác với bản đồ của bạn. Bạn có thể sử dụng API này để tuỳ chỉnh cách các chế độ kiểm soát này xuất hiện.
Thay đổi về loại chế độ kiểm soát
Chúng tôi đã ra mắt một số thay đổi đối với loại control
bằng API phiên bản 3.
- API phiên bản 3 hỗ trợ các loại bản đồ khác, bao gồm cả bản đồ địa hình và khả năng thêm các loại bản đồ tuỳ chỉnh.
- Chế độ kiểm soát phân cấp v2,
GHierarchicalMapTypeControl
, không còn hoạt động nữa.
Bạn có thể đạt được hiệu quả tương tự bằng cách sử dụng chế độ điều khiển google.maps.MapTypeControlStyle.HORIZONTAL_BAR
.
- Bố cục ngang do
GMapTypeControl
cung cấp trong phiên bản 2 không có trong phiên bản 3.
Thêm chế độ điều khiển vào bản đồ
Với Maps JavaScript API phiên bản 2, bạn sẽ thêm các chế độ điều khiển vào bản đồ thông qua phương thức addControl()
của đối tượng bản đồ. Trong phiên bản 3, thay vì truy cập hoặc sửa đổi các chế độ điều khiển trực tiếp, bạn sẽ sửa đổi đối tượng MapOptions
được liên kết. Mẫu
dưới đây cho biết cách tuỳ chỉnh bản đồ để thêm các
chế độ điều khiển sau:
- các nút cho phép người dùng chuyển đổi giữa các loại bản đồ có sẵn
- tỷ lệ bản đồ
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
// Add controls
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add controls
mapTypeControl: true,
scaleControl: true
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
Điều khiển vị trí trên bản đồ
Các nút điều khiển vị trí đã thay đổi rất nhiều trong phiên bản 3. Trong phiên bản 2, phương thức addControl()
sẽ lấy một tham số thứ hai không bắt buộc, cho phép bạn chỉ định vị trí của thành phần điều khiển so với các góc của bản đồ.
Trong phiên bản 3, bạn có thể đặt vị trí của một chế độ điều khiển thông qua thuộc tính position
của các chế độ điều khiển. Vị trí của các thành phần điều khiển này không tuyệt đối. Thay vào đó, API sẽ bố trí các thành phần điều khiển một cách thông minh bằng cách "di chuyển" chúng quanh các thành phần bản đồ hiện có trong những giới hạn nhất định (chẳng hạn như kích thước bản đồ).
Điều này đảm bảo rằng các chế độ điều khiển mặc định tương thích với các chế độ điều khiển của bạn.
Xem phần Kiểm soát vị trí trong phiên bản 3 để biết thêm thông tin.
Mã sau đây đặt lại vị trí các chế độ kiểm soát từ các mẫu trên:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
// Add map type control
map.addControl(new GMapTypeControl(), new GControlPosition(
G_ANCHOR_TOP_LEFT, new GSize(10, 10)));
// Add scale
map.addControl(new GScaleControl(), new GControlPosition(
G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 20)));
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add map type control
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT
},
// Add scale
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT
}
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
Điều khiển tuỳ chỉnh
API JavaScript của Maps cho phép bạn tạo các chế độ điều khiển điều hướng tuỳ chỉnh.
Để tuỳ chỉnh các chế độ điều khiển bằng API v2, bạn sẽ phân lớp con của lớp GControl
và xác định các trình xử lý cho phương thức initialize()
và getDefaultPosition()
.
Không có lớp nào tương đương với lớp GControl
trong phiên bản 3. Thay vào đó, các chế độ điều khiển sẽ được biểu thị dưới dạng phần tử DOM. Để thêm một thành phần điều khiển tuỳ chỉnh bằng API v3, hãy tạo một cấu trúc DOM cho chế độ điều khiển đó trong hàm khởi tạo dưới dạng phần tử con của Node
(ví dụ: phần tử <div>
) và thêm trình nghe sự kiện để xử lý mọi sự kiện DOM. Đẩy Node
vào mảng controls[position]
của bản đồ để thêm một thực thể của thành phần điều khiển tuỳ chỉnh vào bản đồ.
Do cách triển khai lớp HomeControl
tuân thủ các yêu cầu về giao diện nêu trên (xem tài liệu về Chế độ điều khiển tuỳ chỉnh để biết thông tin chi tiết), các mã mẫu sau đây cho biết cách thêm một thành phần điều khiển tuỳ chỉnh vào bản đồ.
map.addControl(new HomeControl(),
GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
homeControlDiv);
Lớp phủ
Lớp phủ phản ánh các đối tượng mà bạn "thêm" vào bản đồ để chỉ định các điểm, đường kẻ, khu vực hoặc bộ sưu tập các đối tượng.
Thêm và xoá lớp phủ
Các loại đối tượng mà Lớp phủ biểu thị là giống nhau giữa phiên bản 2 và phiên bản 3, nhưng được xử lý theo cách khác nhau.
Các lớp phủ trong API phiên bản 2 được thêm vào và xoá khỏi bản đồ bằng các phương thức addOverlay()
và removeOverlay()
của đối tượng GMap2
. Trong phiên bản 3, bạn chỉ định một bản đồ cho một Lớp phủ thông qua thuộc tính map
của lớp tuỳ chọn lớp phủ được liên kết.
Bạn cũng có thể trực tiếp thêm hoặc xoá một lớp phủ bằng cách gọi phương thức setMap()
của đối tượng lớp phủ và chỉ định bản đồ mong muốn. Việc đặt thuộc tính bản đồ thành null
sẽ xóa lớp phủ.
Không có phương thức clearOverlays()
nào trong phiên bản 3.
Nếu muốn quản lý một tập hợp lớp phủ, bạn nên tạo một mảng để giữ các lớp phủ đó. Khi sử dụng mảng này, bạn có thể gọi
setMap()
trên từng lớp phủ trong mảng đó (truyền
null
nếu bạn cần xoá chúng).
Điểm đánh dấu có thể kéo
Theo mặc định, điểm đánh dấu có thể nhấp vào nhưng không kéo được. Hai mẫu sau đây thêm một điểm đánh dấu có thể kéo:
var myLatLng = new GLatLng(-25.363882, 131.044922);
var map = new GMap2(document.getElementById('map'));
map.setCenter(myLatLng, 4);
var marker = new GMarker(latLng, {
draggable: true
});
map.addOverlay(marker);
var myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
var map = new google.maps.Map(
document.getElementById('map'), {
center: myLatLng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng,
draggable: true,
map: map
});
Biểu tượng
Bạn có thể xác định một biểu tượng tuỳ chỉnh để hiển thị thay cho điểm đánh dấu mặc định.
Để dùng hình ảnh tuỳ chỉnh trong phiên bản 2, bạn có thể tạo một thực thể GIcon
từ G_DEFAULT_ICON type
và sửa đổi thực thể đó. Nếu hình ảnh lớn hơn hoặc nhỏ hơn biểu tượng mặc định, bạn phải chỉ định hình ảnh đó bằng một thực thể GSize
.
API v3 sẽ đơn giản hoá quy trình này một chút.
Bạn chỉ cần đặt thuộc tính icon
của điểm đánh dấu thành URL của hình ảnh tuỳ chỉnh và API sẽ tự động định kích thước biểu tượng.
API JavaScript của Maps cũng hỗ trợ các biểu tượng phức tạp.
Một biểu tượng phức tạp có thể bao gồm nhiều ô, hình dạng phức tạp hoặc chỉ định "thứ tự ngăn xếp" thể hiện hình ảnh so với các lớp phủ khác. Để thêm hình dạng vào một điểm đánh dấu trong phiên bản 2, bạn cần chỉ định thuộc tính bổ sung trong mỗi thực thể GIcon
và truyền thuộc tính này dưới dạng một tuỳ chọn đến hàm khởi tạo GMarker
. Trong phiên bản 3, các biểu tượng được chỉ định theo cách này phải đặt thuộc tính icon
thành một đối tượng thuộc loại Icon
.
Bóng đánh dấu không được hỗ trợ trong phiên bản 3.
Các ví dụ sau đây minh hoạ một lá cờ bãi biển tại Bãi biển Bondi ở Úc, trong đó biểu tượng có phần trong suốt không nhấp vào được:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();
var flagIcon = new GIcon(G_DEFAULT_ICON);
flagIcon.image = '/images/beachflag.png';
flagIcon.imageMap = [1, 1, 1, 20, 18, 20, 18 , 1];
var bbLatLng = new GLatLng(-33.890542, 151.274856);
map.addOverlay(new GMarker(bbLatLng, {
icon: flagIcon
}));
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bbLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var bbMarker = new google.maps.Marker({
icon: '/images/beachflag.png'
shape: shape,
position: bbLatLng,
map: map
});
Hình nhiều đường
Hình nhiều đường bao gồm một mảng LatLng
cùng với một loạt các đoạn thẳng kết nối những vị trí đó theo trình tự có thứ tự.
Việc tạo và hiển thị đối tượng Polyline
trong v3 cũng tương tự như sử dụng đối tượng GPolyline
trong v2. Các mẫu sau đây vẽ một hình nhiều đường trắc địa bán trong suốt, rộng 3 pixel, từ Zurich đến Sydney qua Singapore:
var polyline = new GPolyline(
[
new GLatLng(47.3690239, 8.5380326),
new GLatLng(1.352083, 103.819836),
new GLatLng(-33.867139, 151.207114)
],
'#FF0000', 3, 0.5, {
geodesic: true
});
map.addOverlay(polyline);
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(47.3690239, 8.5380326),
new google.maps.LatLng(1.352083, 103.819836),
new google.maps.LatLng(-33.867139, 151.207114)
],
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
geodesic: true
});
polyline.setMap(map);
Hình nhiều đường đã mã hoá
Phiên bản 3 này không hỗ trợ việc tạo đối tượng Polyline
trực tiếp từ hình nhiều dòng được mã hoá. Thay vào đó, Thư viện hình học cung cấp các phương thức để mã hoá và giải mã hình nhiều đường. Hãy xem phần Thư viện trong API Maps phiên bản 3 để biết thêm thông tin về cách tải thư viện này.
Các ví dụ dưới đây vẽ cùng một hình nhiều đường được mã hoá; mã v3 sử dụng phương thức decodePath()
từ không gian tên google.maps.geometry.encoding
.
var polyline = new GPolyline.fromEncoded({
points: 'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H',
levels: 'PPP',
zoomFactor: 2,
numLevels: 18,
color: '#ff0000',
opacity: 0.8,
weight: 3
});
map.addOverlay(polyline);
var polyline = new google.maps.Polyline({
path: google.maps.geometry.encoding.decodePath(
'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H'),
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
});
polyline.setMap(map);
Đa giác
Đa giác xác định một vùng trong một vòng kín. Giống như đối tượng Polyline
, các đối tượng Polygon
bao gồm một loạt các điểm theo thứ tự. Lớp Polygon
trong phiên bản 3 rất giống với lớp GPolygon
trong phiên bản 2, với một ngoại lệ đáng chú ý là bạn không còn phải lặp lại đỉnh bắt đầu ở cuối đường dẫn để đóng vòng lặp. API v3 sẽ tự động đóng mọi đa giác bằng cách vẽ một nét gạch nối toạ độ cuối cùng trở lại toạ độ đầu tiên. Các đoạn mã sau đây tạo một đa giác đại diện cho Tam giác Bermuda:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(24.886436, -70.268554), 5);
var bermudaTriangle = new GPolygon(
[
new GLatLng(25.774252, -80.190262),
new GLatLng(18.466465, -66.118292),
new GLatLng(32.321384, -64.75737),
new GLatLng(25.774252, -80.190262)
],
'#FF0000', 2, 0.8, '#FF0000', 0.35);
map.addOverlay(bermudaTriangle);
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(24.886436, -70.268554),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 5
});
var bermudaTriangle = new google.maps.Polygon({
paths: [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
],
strokeColor: '#FF0000',
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
Hình dạng có thể chỉnh sửa của người dùng
Người dùng có thể chỉnh sửa hình nhiều đường và đa giác. Các đoạn mã sau đây là tương đương:
map.addOverlay(polyline);
polyline.enableEditing();
polyline.setMap(map);
polyline.setEditable(true);
Để sử dụng các tính năng vẽ nâng cao hơn, hãy xem Thư viện bản vẽ trong tài liệu phiên bản 3.
Cửa sổ thông tin
InfoWindow
hiển thị nội dung trong một cửa sổ nổi phía trên bản đồ. Có một số khác biệt chính giữa cửa sổ thông tin trong v2 và v3:
- API v2 chỉ hỗ trợ
GInfoWindow
cho mỗi bản đồ, trong khi API v3 hỗ trợ nhiều InfoWindow
đồng thời trên mỗi bản đồ.
InfoWindow
phiên bản 3 sẽ vẫn mở khi bạn nhấp vào bản đồ. GInfoWindow
phiên bản 2 sẽ tự động đóng khi bạn nhấp vào bản đồ. Bạn có thể mô phỏng hành vi của v2 bằng cách thêm trình nghe click
vào đối tượng Map
.
- API v3 không cung cấp dịch vụ hỗ trợ gốc cho
InfoWindow
dạng thẻ.
Lớp phủ mặt đất
Để đặt hình ảnh trên bản đồ, bạn nên sử dụng đối tượng GroundOverlay
. Hàm khởi tạo cho GroundOverlay
về cơ bản là giống nhau trong v2 và v3: hàm này chỉ định URL của hình ảnh và ranh giới của hình ảnh làm tham số.
Ví dụ sau đây đặt một bản đồ cổ của Newark, NJ lên bản đồ dưới dạng một lớp phủ:
var bounds = new GLatLngBounds(
new GLatLng(40.716216, -74.213393),
new GLatLng(40.765641, -74.139235));
var overlay = new GGroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
map.addOverlay(overlay);
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216, -74.213393),
new google.maps.LatLng(40.765641, -74.139235));
var overlay = new google.maps.GroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
overlay.setMap(map);
Các loại bản đồ
Các loại bản đồ có trong phiên bản 2 và v3 hơi khác nhau, nhưng tất cả các loại bản đồ cơ bản đều có trong cả hai phiên bản của API. Theo mặc định, phiên bản 2 sử dụng các ô bản đồ đường "được sơn" tiêu chuẩn. Tuy nhiên, v3 yêu cầu cung cấp một loại bản đồ cụ thể khi tạo đối tượng google.maps.Map
.
Các loại bản đồ phổ biến
Có bốn loại bản đồ cơ bản trong cả phiên bản 2 và phiên bản 3:
MapTypeId.ROADMAP
(thay thế G_NORMAL_MAP
)
hiển thị chế độ xem bản đồ đường.
MapTypeId.SATELLITE
(thay thế G_SATELLITE_MAP
)
hiển thị hình ảnh vệ tinh của Google Earth.
MapTypeId.HYBRID
(thay thế G_HYBRID_MAP
) hiển thị kết hợp chế độ xem thông thường và chế độ xem vệ tinh.
MapTypeId.TERRAIN
(thay thế G_PHYSICAL_MAP
)
hiển thị bản đồ thực tế dựa trên thông tin địa hình.
Dưới đây là ví dụ về cách thiết lập bản đồ thành chế độ xem địa hình bằng phiên bản 2 và v3:
map.setMapType(G_PHYSICAL_MAP);
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
API JavaScript của Maps phiên bản 3 cũng thực hiện một vài thay đổi đối với các loại bản đồ ít phổ biến hơn:
- Các ô bản đồ cho các thiên thể khác ngoài Trái đất không được cung cấp dưới dạng loại bản đồ trong API phiên bản 3, nhưng bạn có thể truy cập vào các ô bản đồ này dưới dạng các loại bản đồ tuỳ chỉnh trong ví dụ này.
- Không có loại bản đồ đặc biệt nào trong v3 thay thế cho loại
G_SATELLITE_3D_MAP
từ v2. Thay vào đó, bạn có thể tích hợp trình bổ trợ Google Earth vào bản đồ phiên bản 3 bằng cách sử dụng thư viện này.
Hình ảnh thu phóng tối đa
Hình ảnh vệ tinh không phải lúc nào cũng có sẵn ở mức thu phóng cao. Nếu bạn muốn biết mức thu phóng cao nhất hiện có trước khi đặt mức thu phóng, hãy sử dụng lớp google.maps.MaxZoomService
. Lớp này thay thế phương thức GMapType.getMaxZoomAtLatLng()
từ phiên bản 2.
var point = new GLatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.setCenter(point);
map.setMapType(G_HYBRID_MAP);
map.getCurrentMapType().getMaxZoomAtLatLng(point,
function(response) {
if (response.status) {
map.setZoom(response.zoom);
} else {
alert("Error in Max Zoom Service.");
}
});
var myLatlng = new google.maps.LatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new google.maps.Map(
document.getElementById("map"),{
zoom: 0,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var maxZoomService = new google.maps.MaxZoomService();
maxZoomService.getMaxZoomAtLatLng(
myLatlng,
function(response) {
if (response.status == google.maps.MaxZoomStatus.OK) {
map.setZoom(response.zoom);
} else {
alert("Error in Max Zoom Service.");
}
});
Hình ảnh phối cảnh từ trên không
Khi bật Hình ảnh trên không ở phiên bản 3, các chế độ điều khiển tương tự như chế độ điều khiển
GLargeZoomControl3D
của phiên bản 2, có thêm chế độ điều khiển
Xoay vòng xen kẽ để xoay qua các hướng được hỗ trợ.
Bạn có thể theo dõi các thành phố hiện có hình ảnh 45° trên
bản đồ này. Khi có hình ảnh 45°, lựa chọn trình đơn phụ sẽ được thêm vào nút Vệ tinh của API Maps.
Lớp
Lớp là các đối tượng trên bản đồ bao gồm một hoặc nhiều lớp phủ. Chúng có thể được điều khiển như một đơn vị duy nhất và thường phản ánh tập hợp đối tượng.
Các lớp được hỗ trợ
API v3 cung cấp quyền truy cập vào một số lớp khác nhau. Các lớp này chồng chéo với lớp GLayer
của phiên bản 2 trong các khu vực sau:
-
Đối tượng
KmlLayer
kết xuất các phần tử KML và GeoRSS vào các lớp phủ v3, cung cấp sự tương đương với lớp v2 GeoXml
.
- Đối tượng
TrafficLayer
kết xuất một lớp mô tả tình trạng giao thông, tương tự như lớp phủ GTrafficOverlay
phiên bản 2.
Các lớp này khác với phiên bản 2. Dưới đây là nội dung mô tả về những điểm khác biệt đó. Bạn có thể thêm các lớp này vào bản đồ bằng cách gọi setMap()
, truyền vào đó đối tượng Map
để hiển thị lớp.
Bạn có thể xem thêm thông tin về các lớp được hỗ trợ trong tài liệu về Lớp.
Lớp KML và GeoRSS
API JavaScript của Maps hỗ trợ các định dạng dữ liệu KML và GeoRSS để hiển thị thông tin địa lý. Các tệp KML hoặc GeoRSS phải có thể truy cập công khai nếu bạn muốn đưa chúng vào bản đồ. Trong phiên bản 3, các định dạng dữ liệu này được hiển thị bằng cách sử dụng thực thể của KmlLayer
, thay thế đối tượng GGeoXml
từ v2.
API v3 linh hoạt hơn khi kết xuất KML, cho phép bạn chặn InfoWindows và sửa đổi phản hồi nhấp chuột. Xem tài liệu Lớp KML và GeoRSS phiên bản 3 để biết thêm chi tiết.
Khi kết xuất một KmlLayer
, các hạn chế về kích thước và độ phức tạp sẽ được áp dụng; xem tài liệu về KmlLayer để biết thông tin chi tiết.
Các mẫu sau đây so sánh cách tải một tệp KML.
geoXml = new GGeoXml(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml');
map.addOverlay(geoXml);
var layer = new google.maps.KmlLayer(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml', {
preserveViewport: true
});
layer.setMap(map);
Lớp lưu lượng truy cập
v3 cho phép bạn thêm thông tin giao thông theo thời gian thực (nếu được hỗ trợ) vào bản đồ bằng cách sử dụng đối tượng TrafficLayer
. Thông tin lưu lượng truy cập sẽ được
cung cấp cho thời điểm thực hiện yêu cầu. Những ví dụ sau hiển thị thông tin giao thông cho Los Angeles:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(34.0492459, -118.241043), 13);
map.setUIToDefault();
var trafficOptions = {incidents:false};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(34.0492459, -118.241043),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
Không giống như v2, không có tuỳ chọn nào cho hàm khởi tạo TrafficLayer
trong v3. Sự cố không có trong phiên bản 3.
Dịch vụ
Mã hoá địa lý
API JavaScript của Maps cung cấp một đối tượng geocoder
để mã hoá địa lý các địa chỉ một cách linh động từ hoạt động đầu vào của người dùng. Nếu bạn muốn mã hoá địa lý các địa chỉ tĩnh, đã biết, hãy xem tài liệu về API mã hoá địa lý.
API mã hoá địa lý đã được nâng cấp và cải tiến đáng kể, bổ sung các tính năng mới và thay đổi cách trình bày dữ liệu.
GClientGeocoder
trong API phiên bản 2 đã cung cấp hai phương thức khác nhau để mã hoá địa lý tiến và ngược, cũng như các phương thức bổ sung để tác động đến cách thực hiện mã hoá địa lý. Ngược lại, đối tượng Geocoder
của v3 chỉ cung cấp một phương thức geocode()
. Phương thức này nhận giá trị cố định đối tượng chứa các cụm từ nhập (ở dạng đối tượng Yêu cầu mã hoá địa lý) và một phương thức gọi lại. Tuỳ thuộc vào việc yêu cầu chứa thuộc tính address
dạng văn bản hay đối tượng LatLng
, API mã hoá địa lý sẽ trả về phản hồi mã hoá địa lý xuôi hoặc ngược. Bạn có thể tác động đến cách thực hiện việc mã hoá địa lý bằng cách chuyển các trường bổ sung vào yêu cầu mã hoá địa lý:
- Bao gồm văn bản
address
kích hoạt mã hoá địa lý chuyển tiếp, tương đương với việc gọi phương thức getLatLng()
.
- Việc bao gồm một đối tượng
latLng
sẽ kích hoạt mã hoá địa lý ngược, tương đương với việc gọi phương thức getLocations()
.
- Việc thêm thuộc tính
bounds
sẽ cho phép Xu hướng khung hiển thị, tương đương với việc gọi phương thức setViewport()
.
- Việc thêm thuộc tính
region
sẽ cho phép Xu hướng mã khu vực, tương đương với việc gọi phương thức setBaseCountryCode()
.
Phản hồi mã hoá địa lý trong phiên bản 3 rất khác so với phản hồi phiên bản 2. API v3 thay thế cấu trúc lồng nhau mà v2 sử dụng bằng cấu trúc phẳng hơn giúp phân tích cú pháp dễ dàng hơn. Ngoài ra, phản hồi v3 chi tiết hơn: mỗi kết quả có một thành phần địa chỉ giúp đưa ra ý tưởng tốt hơn về độ phân giải của từng kết quả.
Mã sau đây lấy một địa chỉ dạng văn bản và hiển thị kết quả đầu tiên từ việc mã hoá địa lý địa chỉ đó:
var geocoder = new GClientGeocoder();
var infoPanel;
var map;
var AccuracyDescription = [
'Unknown accuracy', 'country level accuracy',
'region level accuracy', 'sub-region level accuracy',
'town level accuracy', 'post code level accuracy',
'street level accuracy', 'intersection level accuracy',
'address level accuracy', 'premise level accuracy',
];
function geocode_result_handler(response) {
if (!response || response.Status.code != 200) {
alert('Geocoding failed. ' + response.Status.code);
} else {
var bounds = new GLatLngBounds(new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.south,
response.Placemark[0].ExtendedData.LatLonBox.west
), new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.north,
response.Placemark[0].ExtendedData.LatLonBox.east
));
map.setCenter(bounds.getCenter(),
map.getBoundsZoomLevel(bounds));
var latlng = new GLatLng(
response.Placemark[0].Point.coordinates[1],
response.Placemark[0].Point.coordinates[0]);
infoPanel.innerHTML += '<p>1st result is <em>' +
// No info about location type
response.Placemark[0].address +
'</em> of <em>' +
AccuracyDescription[response.Placemark[0].
AddressDetails.Accuracy] +
'</em> at <tt>' + latlng + '</tt></p>';
var marker_title = response.Placemark[0].address +
' at ' + latlng;
map.clearOverlays();
var marker = marker = new GMarker(
latlng,
{'title': marker_title}
);
map.addOverlay(marker);
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.getLocations(address, geocode_result_handler);
}
function initialize() {
map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(38, 15), 2);
map.setUIToDefault();
infoPanel = document.getElementById('info-panel');
}
var geocoder = new google.maps.Geocoder();
var infoPanel;
var map;
var marker;
function geocode_result_handler(result, status) {
if (status != google.maps.GeocoderStatus.OK) {
alert('Geocoding failed. ' + status);
} else {
map.fitBounds(result[0].geometry.viewport);
infoPanel.innerHTML += '<p>1st result for geocoding is <em>' +
result[0].geometry.location_type.toLowerCase() +
'</em> to <em>' +
result[0].formatted_address + '</em> of types <em>' +
result[0].types.join('</em>, <em>').replace(/_/, ' ') +
'</em> at <tt>' + result[0].geometry.location +
'</tt></p>';
var marker_title = result[0].formatted_address +
' at ' + latlng;
if (marker) {
marker.setPosition(result[0].geometry.location);
marker.setTitle(marker_title);
} else {
marker = new google.maps.Marker({
position: result[0].geometry.location,
title: marker_title,
map: map
});
}
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.geocode({'address': address}, geocode_result_handler);
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(38, 15),
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID
});
infoPanel = document.getElementById('info-panel');
}
Cách tìm
API JavaScript của Maps phiên bản 3 thay thế lớp GDirections
từ phiên bản 2 bằng lớp DirectionsService
để tính toán đường đi.
Phương thức route()
trong phiên bản 3 thay thế cả phương thức load()
và loadFromWaypoints()
từ API phiên bản 2. Phương thức này sẽ lấy một giá trị cố định đối tượng DirectionsRequest
duy nhất chứa các điều khoản đầu vào và một phương thức gọi lại để thực thi khi nhận được phản hồi. Các tuỳ chọn có thể được cung cấp trong giá trị cố định đối tượng này, tương tự như giá trị cố định đối tượng GDirectionsOptions
trong phiên bản 2.
Trong API JavaScript của Maps phiên bản 3, nhiệm vụ gửi yêu cầu chỉ đường đã được tách riêng khỏi nhiệm vụ hiển thị yêu cầu hiện được xử lý bằng lớp DirectionsRenderer
. Bạn có thể liên kết một đối tượng DirectionsRenderer
với bất kỳ đối tượng ánh xạ hoặc DirectionsResult
nào thông qua các phương thức setMap()
và setDirections()
. Vì trình kết xuất là một MVCObject
, nên trình kết xuất này sẽ phát hiện mọi thay đổi đối với các thuộc tính của trình kết xuất và cập nhật bản đồ khi các hướng được liên kết thay đổi.
Mã sau đây minh hoạ cách yêu cầu chỉ đường đi bộ đến một vị trí cụ thể bằng cách sử dụng đường dành cho người đi bộ từ một địa chỉ. Xin lưu ý rằng chỉ phiên bản 3 có thể cung cấp chỉ đường đi bộ trong lối đi bộ tại Sở thú Dublin.
var map;
var directions;
var directionsPanel;
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsPanel = document.getElementById("route");
map = new GMap2(document.getElementById('map'));
map.setCenter(origin, 10);
map.setUIToDefault();
directions = new GDirections(map, directionsPanel);
directions.loadFromWaypoints(
[origin, destination], {
travelMode: 'G_TRAVEL_MODE_WALKING',
});
}
var map;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsRenderer = new google.maps.DirectionsRenderer();
map = new google.maps.Map(
document.getElementById('map'), {
center: origin,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsRenderer.setPanel(document.getElementById("route"));
directionsRenderer.setMap(map);
directionsService.route({
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.WALKING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
}
});
}
Chế độ xem đường phố
Chế độ xem đường phố của Google cung cấp chế độ xem tương tác 360° từ
các vị trí được chỉ định trong khu vực phủ sóng. API v3 hỗ trợ Chế độ xem đường phố ngay trong trình duyệt, không giống như phiên bản 2 yêu cầu trình bổ trợ Flash® để hiển thị hình ảnh trong Chế độ xem đường phố.
Hình ảnh Chế độ xem đường phố được hỗ trợ thông qua việc sử dụng
đối tượng StreetViewPanorama
trong phiên bản 3 hoặc
đối tượng GStreetviewPanorama
trong phiên bản 2. Các lớp này có giao diện khác nhau, nhưng có cùng vai trò: kết nối vùng chứa div
với hình ảnh trong Chế độ xem đường phố và cho phép bạn chỉ định vị trí và POV (góc nhìn) của ảnh toàn cảnh trong Chế độ xem đường phố.
function initialize() {
var fenwayPark = new GLatLng(42.345573, -71.098326);
panoramaOptions = {
latlng: fenwayPark,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new GStreetviewPanorama(
document.getElementById('pano'),
panoramaOptions);
GEvent.addListener(myPano, "error", handleNoFlash);
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoramaOptions = {
position: fenway,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'),
panoramaOptions);
}
Bạn có thể truy cập trực tiếp vào dữ liệu Chế độ xem đường phố thông qua
đối tượng StreetViewService
trong phiên bản 3 hoặc đối tượng
GStreetviewClient
tương tự trong phiên bản 2. Cả hai đều cung cấp các giao diện tương tự nhau để truy xuất hoặc kiểm tra tính sẵn có của dữ liệu Chế độ xem đường phố và cho phép tìm kiếm theo vị trí hoặc mã ảnh toàn cảnh.
Trong phiên bản 3, Chế độ xem đường phố được bật theo mặc định. Bản đồ sẽ xuất hiện cùng với
tuỳ chọn kiểm soát Người hình mắc áo trong Chế độ xem đường phố và API sẽ sử dụng lại div bản đồ để hiển thị
ảnh toàn cảnh của Chế độ xem đường phố. Mã sau minh hoạ cách mô phỏng hành vi
phiên bản 2 bằng cách phân tách các ảnh toàn cảnh của Chế độ xem đường phố thành một div riêng.
var marker;
var panoClient = new GStreetviewClient();
function initialize() {
if (GBrowserIsCompatible()) {
var myPano = new GStreetviewPanorama(
document.getElementById('pano'));
GEvent.addListener(myPano, 'error', handleNoFlash);
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(42.345573, -71.098326), 16);
map.setUIToDefault();
GEvent.addListener(map, 'click', function(overlay, latlng) {
if (marker) {
marker.setLatLng(latlng);
} else {
marker = new GMarker(latlng);
map.addOverlay(marker);
}
var nearestPano = panoClient.getNearestPanorama(
latlng, processSVData);
});
function processSVData(panoData) {
if (panoData.code != 200) {
alert("Panorama data not found for this location.");
}
var latlng = marker.getLatLng();
var dLat = latlng.latRadians()
- panoData.location.latlng.latRadians();
var dLon = latlng.lngRadians()
- panoData.location.latlng.lngRadians();
var y = Math.sin(dLon) * Math.cos(latlng.latRadians());
var x = Math.cos(panoData.location.latlng.latRadians()) *
Math.sin(latlng.latRadians()) -
Math.sin(panoData.location.latlng.latRadians()) *
Math.cos(latlng.latRadians()) * Math.cos(dLon);
var bearing = Math.atan2(y, x) * 180 / Math.PI;
myPano.setLocationAndPOV(panoData.location.latlng, {
yaw: bearing
});
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
}
}
// Load the API with libraries=geometry
var map;
var marker;
var panorama;
var sv = new google.maps.StreetViewService();
function radians(degrees) { return Math.PI * degrees / 180.0 };
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"));
map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(42.345573, -71.098326),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 16
});
google.maps.event.addListener(map, 'click', function(event) {
if (!marker) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
} else {
marker.setPosition(event.latLng);
}
sv.getPanoramaByLocation(event.latLng, 50, processSVData);
});
}
function processSVData(panoData, status) {
if (status == google.maps.StreetViewStatus.OK) {
alert("Panorama data not found for this location.");
}
var bearing = google.maps.geometry.spherical.computeHeading(
panoData.location.latLng, marker.getPosition());
panorama.setPano(panoData.location.pano);
panorama.setPov({
heading: bearing,
pitch: 0,
zoom: 1
});
panorama.setVisible(true);
marker.setMap(panorama);
}