Cấp bậc tác giả:

DOTNET

Hiển thị Google Map với nhiều địa điểm trong ASP.NET

Được viết bởi QuangIT ngày 03/04/2013 lúc 02:52 PM
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 đồ.
  • 0
  • 5290
Tải tệp tin: Click ở đây

Hiển thị Google Map với nhiều địa điểm trong ASP.NET


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. 
googlemap.jpg

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.

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML