1. Giới thiệu
Agreenet MapAPI là dịch vụ do Agreenet cung cấp hoàn toàn miễn phí, Agreenet MapAPI
cho phép nhúng bản đồ tại một địa điểm vào bất cứ website nào (ASP, ASP.NET,
PHP, JSP, HTML,...) theo tọa độ hoặc địa chỉ truyền vào.
2. Hướng dẫn sử dụng
Bước 1: Nhúng đoạn mã giống bên dưới
vào trong website của bạn, ngay sau thẻ <HEAD> (ở giữa đoạn <HEAD>...</HEAD>).
<script type="text/javascript" src="http://agreenet.vn/Map/AgreenetMapAPI.ashx?key=tdc123"></script>
Bước 2: Tạo 1 thẻ DIV như bên dưới với
ID là MapContainer để chứa bản đồ trong website của bạn, để trong
thẻ <BODY>...</BODY>
<div id="MapContainer"></div>
Bước 3: Nhúng đoạn mã giống bên dưới
vào trong website của bạn, ngay sau thẻ
DIV vừa tạo.
<script language="javascript" type="text/javascript">
// -Khai báo 1 đối tượng Map(bắt buộc): với tham số truyền vào là 1 Container để chứa bản đồ
//Ở đây Container là 1 thẻ DIV được khai báo ở thẻ body có id="MapContainer"
var AgrMap=new AgreenetMap("MapContainer");
//-Thiết lập tâm bản đồ(bắt buộc):có thể dùng một trong 2 cách sau
// +Bằng tọa độ(Kinh độ, Vĩ độ):
AgrMap.SetCentroid(new Geometry("POINT (107.5857 16.4636)"));
// +Bằng địa chỉ("Số nhà Tên đường"):
//AgrMap.SetCentroid(new Address("20 Nguyễn Huệ"));
//-Thiếp lập tỉ lệ zoom(không bắt buộc): mặc định là 16.
AgrMap.SetZoomLevel(16);
//-Thiếp lập kích thước bản đồ(không bắt buộc):
//Nếu không thiết lập, API sẽ tự tính toán dựa trên layout của website
AgrMap.SetSize(600,400);//(width, height)
//-Nạp bản đồ(bắt buộc):
AgrMap.Initialize();
//-Thêm các điểm đánh dấu(không bắt buộc): có thể dùng một trong 2 cách sau
// +Thêm các điểm đánh dấu trên bản đồ bằng tọa độ
AgrMap.AddOverlay(new Geometry("POINT (107.5827 16.4666)"), "<b>Tiêu đề</b> <br />Nội dung chi tiết");
// +Thêm các điểm đánh dấu trên bản đồ bằng địa chỉ
AgrMap.AddOverlay(new Address("20 Nguyễn Huệ"), "20 Nguyễn Huệ");
// +Thông tin chú thích có thể bao gồm các thẻ html và sử dụng icon của bạn, ví dụ như:
AgrMap.AddOverlay(new Geometry("POINT (107.57975912 16.45864709)"),
"<table style='color: yellow; font-size:11px; font-family:Tahoma'><tr><td><img src='http://agreenet.vn/Media/Image/LogoDHH.png' /></td><td><b>Đại học Huế</b> <br />-Địa chỉ: 03 Lê Lợi, Tp.Huế<br /> -Điện thoại: 054 3845658</td></tr></table>");
// +Sử dụng icon của bạn, ví dụ như:
AgrMap.AddOverlay(new Geometry("POINT (107.5827 16.4666)"),
"<b>Tiêu đề</b> <br />Nội dung chi tiết",
new Icon("http://agreenet.vn/Media/Image/Place/University.png",21,23,11,22));
</script>
3. Tùy chọn Icon
Khai báo theo cú pháp:
new Icon(url, width, height, anchorX, anchorY)
Với các tham số được trực quan hóa như sau:
4. Lấy tọa độ (Kinh độ, Vĩ độ)
Vui lòng truy cập vào trang lấy tọa độ
để lấy chuỗi tọa độ từ vị trí trên bản đồ.
5. Demo
Bạn có copy đoạn mã sau dán vào 1 trình soạn thảo văn bản(như notepad) rồi save
với phần mở rộng là .html(xem hướng dẫn ở dưới), sau đó mở bằng một trình duyệt
web như IE hoặc Firefox... để test thử
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://agreenet.vn/Map/AgreenetMapAPI.ashx?key=tdc123"></script>
</head>
<body>
<div id="MapContainer" style="border-color: #CCCCCC #999999 #999999 #CCCCCC;border-style: double;border-width: 3px;" ></div>
<script language="javascript" type="text/javascript">
var AgrMap=new AgreenetMap("MapContainer");
AgrMap.SetSize(600,400);
AgrMap.SetCentroid(new Geometry("POINT (107.5857 16.4636)"));
AgrMap.Initialize();
AgrMap.AddOverlay(new Geometry("POINT (107.5827 16.4666)"), "<b>Tiêu đề</b> <br />Nội dung chi tiết");
AgrMap.AddOverlay(new Address("20 Nguyễn Huệ"), "20 Nguyễn Huệ");
AgrMap.AddOverlay(new Geometry("POINT (107.57975912 16.45864709)"),
"<table style='color: yellow; font-size:11px; font-family:Tahoma'><tr><td><img src='http://agreenet.vn/Media/Image/LogoDHH.png' /></td><td><b>Đại học Huế</b> <br />-Địa chỉ: 03 Lê Lợi, Tp.Huế<br /> -Điện thoại: 054 3845658</td></tr></table>",
new Icon("http://agreenet.vn/Media/Image/Place/University.png",21,23,11,22));
</script>
</body>
</html>
