06/04/2021, 14:48
Google Map Controls - Custom Map Control - Google Maps
Tiếp theo bài cấu hình map controls nâng cao chúng ta tiếp tục tìm hiểu các kiến thức nâng cao hơn đó là Custom Google Map Controls Advance. Như bạn biết tất cả những gì hiển thị trên Browser để là các đoạn mã HTML bình thường nên bạn muốn hiển thị như thế nào thì chỉ cần đánh vào thẻ HTML và ...
Tiếp theo bài cấu hình map controls nâng cao chúng ta tiếp tục tìm hiểu các kiến thức nâng cao hơn đó là Custom Google Map Controls Advance. Như bạn biết tất cả những gì hiển thị trên Browser để là các đoạn mã HTML bình thường nên bạn muốn hiển thị như thế nào thì chỉ cần đánh vào thẻ HTML và CSS. Dưới đây là một quy trình chuẩn giúp bạn custom google map.
- Định nghĩa các style cho element bạn muốn custom
- Xử lý tương tác người dùng hoặc bản đồ thông qua các sự kiện (events)
- Tạo một thẻ DIV bao quanh Controls và thêm nó vào hệ thống Properties của Map Control.
Bây giờ ta sẽ đi sâu vào từng phần cho bạn thấy.
1. Vẽ lại giao diện controls google map
Như phần giới thiệu trên, ta sẽ đặt các controls vào một thẻ DIV và style cho thẻ DIV này. Dưới đây là một ví dụ thể hiện vấn đề này:
// Tạo một thẻ div
var controlDiv = document.createElement('div');
// Thiết lập style cho thẻ div
controlDiv.style.padding = '5px';
// Tạo control UI bằng thẻ div
var controlUI = document.createElement('div');
// Thiết lập style cho controlUI
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
// Gắn controlUI vào controlDiv
controlDiv.appendChild(controlUI);
// Thiết lập CSS tiếp, tạo một thẻ div tiếp theo
var controlText = document.createElement('div');
// Và thiets lập style
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<strong>Home</strong>';
// ControlUI tiếp tục append controlText vào
controlUI.appendChild(controlText);Ví dụ này chỉ đọc tham khảo để hiểu cách tạo mới một thẻ div, gán một thẻ HTML khác vào thẻ div, ...
2. Xử lý sự kiện các Custom Controls Google Map
Khi bạn tạo một trình điều khiển thì chắc chắn bạn muốn trình điều khiển đó thực hiện một nhiệm vụ gì đó trong project của bạn. Control đó có thể được thay đổi trạng thái bởi chính người dùng hoặc do bản đồ Map can thiệp vào. Với người dùng thì đơn giản nhưng đối với MAP thì lại là vấn đề khó khăn. Nhưng bạn đừng lo, google map đã cung cấp các API cho phép ta giải quyết vấn đề này đó chính là hàm addDomListener().
Ví dụ:
// Tạo vị trí bản đồ tại Chicago
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
// Them sự kiện click vào outer thì sẽ di chuyển bản đồ tới chicago
google.maps.event.addDomListener(outer, 'click', function() {
map.setCenter(chicago);
});
3. Positioning Custom Controls
Các trình điều khiển tùy chỉnh (tự tạo) được đặt ở một vị trí nào đó trên bản đồ được xác định bởi chính coder (google map controls position), danh sách các control hiện tại ở một vị trí nào đó được xác định bởi mảng map.controls và các key chính là những vị trí của đối tượng google.maps.ControlPositions.
Ví dụ:
// Tạo div control mới
var controlDiv = document.createElement('div');
// gắn nó vào vịt rí TOP_RIGHT
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
4. Ví dụ Custom Control Google Map
Trong ví dụ này ta sẽ tạo một bản đồ google map, một button với tên là HOME và đặt nó ở vị trí TOP_RIGHT. Khi click vào biểu tượng HOME này thì bản đồ sẽ di chuyển đến vị trí trung tâm thành phố Hồ Chí Minh.
Xem demo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Custom controls</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script>
<script>
// Biến lưu trữ map
var map;
// Thông số tung độ vĩ độ HCM
var hochiminh = new google.maps.LatLng(10.771971, 106.697845);
/**
* The HomeControl thêm control vào google map
* kết quả trả về là vị trí trung tâm thành phố HCM
* tham số truyenf vào là control Div và map hiện tại
* @constructor
*/
function HomeControl(controlDiv)
{
// Style cho div
controlDiv.style.padding = '5px';
// Tạo UI và Style cho UI
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
// Gán ControlUI vào controlDiv
controlDiv.appendChild(controlUI);
// Style cho đoạn text bên trong và gán vào controlUI
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home</b>';
controlUI.appendChild(controlText);
// Khi click vào controlUI thì sẽ thiết lập vị trí center TPHCM
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(hochiminh);
});
}
function initialize()
{
var mapDiv = document.getElementById('map-canvas');
var mapOptions = {
zoom: 12,
center: hochiminh
};
map = new google.maps.Map(mapDiv, mapOptions);
var homeControlDiv = document.createElement('div');
// Khởi tạo bản đồ
var homeControl = new HomeControl(homeControlDiv);
// thiết lập index
homeControlDiv.index = 1;
// Gắn vào vị trí TOP_RIGHT
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
5. Thêm trạng thái vào Custom Control Google Map
Ở ví dụ ở mục 4 chúng ta xác định vị trí bản đồ TP Hồ Chí Minh, bây giờ chúng ta sẽ làm ví dụ nâng cao hơn xíu là khi người dùng kéo bản đồ đến vị trí khác, sau đó click vào một control với tên (Thiết lập trung tâm) thì sẽ thiết lập vị trí trung tâm chính là nơi đang ở chứ không phải là TPHCM nữa.
Xem demo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Custom controls</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script>
<script>
var map;
var hochiminh = new google.maps.LatLng(10.771971, 106.697845);
// Định nghĩa một property tên home_ vào đối tượng HomeControl
HomeControl.prototype.home_ = null;
// Định nghĩa method getHome
HomeControl.prototype.getHome = function() {
return this.home_;
};
// Định nghĩa method setHome
HomeControl.prototype.setHome = function(home) {
this.home_ = home;
};
function HomeControl(controlDiv, map, home)
{
var control = this;
// thuộc tính home_ có giá trị bằng tọa độ home truyền vào
control.home_ = home;
controlDiv.style.padding = '5px';
// Set CSS for the control border
var goHomeUI = document.createElement('div');
goHomeUI.style.backgroundColor = 'white';
goHomeUI.style.borderStyle = 'solid';
goHomeUI.style.borderWidth = '2px';
goHomeUI.style.cursor = 'pointer';
goHomeUI.style.textAlign = 'center';
goHomeUI.title = 'Click to set the map to Home';
controlDiv.appendChild(goHomeUI);
// Set CSS for the control interior
var goHomeText = document.createElement('div');
goHomeText.style.fontFamily = 'Arial,sans-serif';
goHomeText.style.fontSize = '12px';
goHomeText.style.paddingLeft = '4px';
goHomeText.style.paddingRight = '4px';
goHomeText.innerHTML = '<b>Home</b>';
goHomeUI.appendChild(goHomeText);
// Set CSS for the setHome control border
var setHomeUI = document.createElement('div');
setHomeUI.style.backgroundColor = 'white';
setHomeUI.style.borderStyle = 'solid';
setHomeUI.style.borderWidth = '2px';
setHomeUI.style.cursor = 'pointer';
setHomeUI.style.textAlign = 'center';
setHomeUI.title = 'Click to set Home to the current center';
controlDiv.appendChild(setHomeUI);
// Set CSS for the control interior
var setHomeText = document.createElement('div');
setHomeText.style.fontFamily = 'Arial,sans-serif';
setHomeText.style.fontSize = '12px';
setHomeText.style.paddingLeft = '4px';
setHomeText.style.paddingRight = '4px';
setHomeText.innerHTML = '<b>Set Home</b>';
setHomeUI.appendChild(setHomeText);
// Click vào HOME
google.maps.event.addDomListener(goHomeUI, 'click', function() {
var currentHome = control.getHome();
map.setCenter(currentHome);
});
// Click vào setHome, thay đội vị trí center hiện tại
google.maps.event.addDomListener(setHomeUI, 'click', function() {
var newHome = map.getCenter();
control.setHome(newHome);
alert('Bạn thiết lập home cho vị trí ' + map.getCenter());
});
}
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var mapOptions = {
zoom: 12,
center: hochiminh
};
map = new google.maps.Map(mapDiv, mapOptions);
// tạo 2 control
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map, hochiminh);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
6. Lời kết
Vậy là ta đã tìm hiểu xong danh sách Google Map Controls API và các ví dụ về controls. Với những ví dụ trên nếu bạn hiểu thì bạn đã có thể tự mình làm chủ dự án rồi đấy. Ở những bài tiếp theo ta sẽ tìm hiểu kiến thức khác và sẽ còn đề cập đến kiến thức cũ dài dài. Nếu bạn chưa biết đăng ký google API thì xem bài hướng dẫn đăng ký google Map API nhé.
