Monday, 05 November 2012 03:13

[Hỏi & Đáp] - Làm sao để hiển thị google maps trong wp?

Written by 
Rate this item
(5 votes)

Hôm qua mình nhận được 1 câu hỏi như sau "Làm sao để hiển thị google maps trong wp?"

Như bạn biết control mặc định trong VS là control Bing Map vậy muốn dùng Google Maps thì phải làm sao?

Bing Maps tuy tương đối mới , nhưng dữ liệu không nhiều. Trong khi đó, Google Maps có nguồn dữ liệu lớn hơn , tất nhiên là lựa chọn hàng đầu cho người lập trình khi muốn hiển thị bản đồ trong ứng dụng của họ.

Bing Maps

Google Maps

Vậy liệu ta có thể sử dụng dùng control Map load Google maps thay cho Bing maps hay không?

Câu trả lời là “Có”

--------------------------------------

Ý tưởng:
Không phải chỉ Google maps có thể thay thế mà bạn còn có thể sử dụng maps khác. Chỉ cần biết cách hoạt động của control map và cách gửi request lên server của map cần thay thế.

Đầu tiên là cách hoạt động của control map:

+ Cách load dữ liệu hình ảnh trong control map hoạt động theo cơ chế chia ra các Tile . một Tile có 256 x 256 pixels được định nghĩa bằng tọa độ X,Y và cấp độ Zoom . Để lấy Uri hình ảnh một Tile trên server, control map dùng phương thức  sau:

+ Phương thức này thuộc lớp TileSource được người phát triển control Map định nghĩa sẽ trả ra Uri để request  server Bing Maps để lấy hình về.
Vậy giải pháp để ta thay thế Bing maps bằng Google maps là ta sẽ kế thừa từ lớp TileSource và override phương thức GetUri  và sẽ tạo Uri đến server Google maps.

Thực hiện:

Ở đây mình viết lớp mới đặt tên là GoogleTile kế thừa từ lớp TileSource ngay trong file GoogleMaps.xaml.cs .Sau đó, mình định nghĩa lại GetUri. Trong thân hàm, mình xét nếu thỏa điều kiện zoomLevel tức là độ Zoom lớn hơn 0 thì sẽ trả ra Uri.

Trước tiên, chúng ta cần phải xác định một Enum có chứa tất cả các chế độ của các bản đồ Google Maps hỗ trợ. Chúng tôi sẽ dùng Enum này sau khi kiểm tra các chế độ của bản đồ của mình.

Tiếp theo, chúng tôi di chuyển theo hướng viết các lớp mà chúng ta đã thảo luận ở trên sẽ chứa Uri GetUri (int x, int y, int zoomLevel) và một số phương thức hữu ích tạo sự thuận tiện cho người dùng.

Chúng ta sử dụng URL sau đây như Tile Google Source:

UriFormat = @"http://mt{0}.google.com/vt/lyrs={1}&z={2}&x={3}&y={4}";

Định nghĩa:
+    {0} đề cập đến số lượng máy chủ mà chúng ta đã giữ y đến 1
+    {1} là mã ký tự của chế độ của bản đồ.
+    {2} đề cập đến mức độ phóng của bản đồ
+    {3} đề cập đến cordinate x của bản đồ
+    {4} đề cập để y cordinate của bản đồ

Bây giờ, chúng ta sang XAML, nơi chúng tôi thực sự xác định kiểm soát bản đồ và các lớp của nó. Trước tiên, chúng ta cần định nghĩa namespace ở trang GoogleMaps.xaml:

xmlns:GoogleTileSource="clr-namespace:googlemaps;assembly=googlemaps"
xmlns:MSPCMCore="clr-namespace:Microsoft.Phone.Controls.Maps.Core; assembly=Microsoft.Phone.Controls.Maps"

Chúng ta giữ cho Map Mode đến Mercator cho các control  không load bất cứ hình ảnh mặc định nào vào Map. Tiếp theo, Chúng ta đặt các tầng  vào Map Control ở các Tiles của Google Maps sẽ được hiển thị. Ta sử dụng 5 tầng để mà ta muốn thay đổi Mode của Map theo lựa chọn trong RadioButton của user.
Ta cũng có thể show nhiều hơn một tầng cùng lúc bằng cách đặt xung quanh với property Opacity của các tầng khác. Nếu muốn giữ Mode static, bạn chỉ cần một tầng. Mỗi tầng có một Tile Source được khai báo trong class GoogleTile..

Cuối cùng để cung cấp cho người dùng với một số chức năng cơ bản của thay đổi chế độ và phóng to, thu nhỏ, chúng ta viết một số xử lý sự kiện.

Cuối cùng , chúng ta đã có một ứng dụng map chỉ với một ài dòng code, chúng ta có thể sử dụng Google Maps với Bing Map control dc cung cấp boi Microsoft

Đọc tới đây chắc bạn chỉ còn chờ Code tham khảo!

Code Download tham khảo

Read 13214 times Last modified on Thursday, 14 November 2013 05:02