Trong bài viết này, chúng ta sẽ làm thế nào để hiển thị nhiều địa điểm trong cùng một bản đồ.
Giới thiệu
Khi cần hiển thị nhiều chi nhánh của công ty trên bản đồ bạn có thể sử dụng Control bản đồ của Google trên trang ASP.Net và hiển thị nhiều địa điểm trên bản đồ.
Bối cảnh: Trong bài viết này, chúng ta sử dụng control bản đồ Google được cung cấp bởi googlemaps.sugurium.net. Để hiển thị bản đồ của Google, bạn cần thực hiện các bước sau
Bước 1: Trước tiên, bạn cần phải tạo khóa API của riêng bạn bằng cách
nhấn vào đây Bước 2: Sau khi nhận được API key, bạn cần phải tải về các dll GMaps từ mã nguồn kèm theo với bài viết này và thêm reference của Gmaps.dll vào dự án của bạn.
Bước 3: Sau khi thêm reference Gmaps.dll bạn đã sẵn sàng để tạo ra các control trên trang ASP.Net của bạn. Vì vậy, đầu tiên đăng ký tagprefix cho Gmaps. Như dưới đây:
<%@ Register assembly="GMaps" namespace="Subgurim.Controles" tagprefix="cc1" %>
Bước 4: Bây giờ tạo Control GMap trên trang ASP.Net của bạn:
<cc1:GMap ID="GMap1" runat="server" Width="600px" Height="500px"
enableHookMouseWheelToZoom="True" />
Bước 5: Bây giờ chúng ta cần phải tạo ra các địa điểm bằng cách xác định vĩ độ và kinh độ. Vì vậy, trong mã của bạn sau đây trong sự kiện Page_Load.
//to run this application you need the key. You can get it here http://en.googlemaps.subgurim.net/
string skey = "Your API key";
GMap1.Key = skey;
GMap1.addControl(new GControl(GControl.preBuilt.GOverviewMapControl));
GMap1.addControl(new GControl(GControl.preBuilt.LargeMapControl));
//creating marker with latitude and logitude
GMarker marker = new GMarker(new GLatLng(16.077805, 108.214259));
//creating pushpin window with content
GInfoWindow window = new GInfoWindow(marker, "<center><b>DOTNET GROUP, Đà Nẵng, Việt Nam</b></center>", true);
//creating new marker for second location
GMarker marker1 = new GMarker(new GLatLng(16.077705, 108.216259));
//creating second pushpin window
GInfoWindow windo1 = new GInfoWindow(marker1, "<center><b>Trụ sở 2 của DOTNET GROUP, Đà Nẵng, Việt Nam </b></center>", true);
//adding windows in GMap control
GMap1.addInfoWindow(window);
GMap1.addInfoWindow(windo1);
Trong đoạn mã trên dòng đầu tiên có khóa API, dán API key mà bạn thu được từ bước 1. Tiếp theo trong mã, tạo GMarker trong đó có vĩ độ và kinh độ của vị trí mà bạn muốn hiển thị trên bản đồ Google. Bạn có thể tạo nhiều dấu mốc. Sau đó chúng ta tạo ra một cửa sổ thông tin đó là gì, nhưng đánh dấu HTML với nội dung tùy chỉnh.
Bước 6: Bây giờ chạy ứng dụng và thấy đầu ra như hình dưới đây.
Kết luận
Trong cách này, bạn có thể hiển thị bản đồ của Google trong trang web với nhiều địa điểm khác nhau.