map
Cập nhật lần cuối vào
map
component sử dụng google maps để phục vụ các tác vụ liên quan tới map
Khả dụng: Component này có mặt trên Tini Studio từ version 1.74.12 trở lên.
Quét mã để trải nghiệm
Xem code mẫu trên Tini StudioDemo
Các thuộc tính
Thuộc tính | Kiểu dữ liệu | Giá trị măc định | Bắt buộc | Mô tả |
---|---|---|---|---|
api-key | string | ✓ | Key của google maps. Tham khảo cách tạo key tại đây | |
latitude | number | ✓ | Vĩ độ trung tâm (center latitude) của map | |
longitude | number | ✓ | Kinh độ trung tâm (center longitude) của map | |
zoom | number | 10 | Mức độ phóng to/ thu nhỏ | |
markers | object | Một marker để đánh dấu bản đồ. Tham khảo cấu hình bên dưới. | ||
polygon | object | Một polygon (đa giác) để đánh dấu bản đồ. Xem chi tiết bên dưới. | ||
polyline | object | Một polyline (đường đa tuyến) để đánh dấu bản đồ. Xem chi tiết bên dưới | ||
circles | object | Một circle (hình tròn) để đánh dấu bản đồ. Xem chi tiết bên dưới. | ||
onMarkerTap | event | Sự kiện được kích hoạt khi touch vào marker. Thông tin trả về sẽ là Marker ID , latitude và longitude . | ||
onTap | event | Sự kiện được gọi khi bấm vào map | ||
onRegionChange | event | Sự kiện được gọi khi người dùng kéo/thả làm thay đổi phạm vi của map. Có chứa các thông tin { latitude, longitude, zoom } |
Marker

Thuộc tính | Kiểu dữ liệu | Bắt buộc | Mô tả |
---|---|---|---|
id | number | ✓ | Định danh duy nhất của marker. |
latitude | number | ✓ | Vĩ độ trung tâm (center latitude) của marker |
longitude | number | ✓ | Kinh độ trung tâm (center longitude) của marker |
title | string | Tiêu đề của marker | |
iconPath | string | Đường dẫn đến tập tin hình ảnh của icon tuỳ biến đại diện cho marker trường hợp bạn không muốn xài icon mặc định của Google Maps. | |
width | number | Chiều rộng của marker | |
height | number | Chiều cao của marker | |
label | string / object | Nhãn cho marker. Bạn có thể truyền vào string hoặc một object { text: string, className: string, color: string, fontSize: string, fontWeight: string } | |
alpha | number | Độ trong suốt của marker. Nhận giá trị trong khoảng từ 0 đến 1; 0: độ trong suốt tuyệt đối (100% transparency); 1: độ đục tuyệt đối (100% opacity). |
Polygon

Thuộc tính | Kiểu dữ liệu | Bắt buộc | Mô tả |
---|---|---|---|
points | Array of objects | ✓ | Chứa tọa độ (latitude và longitude) các đỉnh của đa giác |
fillColor | string | Màu nền của đa giác | |
strokeColor | string | Màu viền của đa giác | |
strokeWidth | string | Độ dày của viền đa giác |
Polyline

Thuộc tính | Kiểu dữ liệu | Bắt buộc | Mô tả |
---|---|---|---|
points | Array of objects | Chứa tọa độ (latitude và longitude) các điểm của polyline (đường đa tuyến) | |
strokeColor | string | Màu viền của polyline | |
strokeWidth | number | Độ dày của viền đa giác |
Circle

Thuộc tính | Kiểu dữ liệu | Bắt buộc | Mô tả |
---|---|---|---|
latitude | number | ✓ | Vĩ độ của tâm đường tròn |
longitude | number | ✓ | Kinh độ của tâm đường tròn |
radius | number | ✓ | Bán kính đường tròn |
fillColor | string | Màu nền của đường tròn | |
strokeColor | string | Màu viền của đường tròn | |
strokeWidth | number | Độ dày viền của đường tròn |
Lưu ý
Trong một số trường hợp map không hiển thị trên device. Bạn cần khai báo giá trị cụ thể width, height cho map mà không phải là %
Sample Code
Một số component được sử dụng trong source API Demo.
pages/component/basic/map/index.txml
<view class="container">
<view class="block">
<map
class="map"
onTap="onTap"
onMarkerTap="onMarkerTap"
latitude="{{latitude}}"
longitude="{{longitude}}"
zoom="{{zoom}}"
markers="{{markers}}"
polyline="{{polyline}}"
polygon="{{polygon}}"
circles="{{circles}}"
apiKey="{{apiKey}}" />
</view>
<view class="block">
<view class="actions">
<button onTap="resetMap">Reset Map</button>
<button onTap="showMarker">Marker</button>
<button onTap="showPolygon">Polygon</button>
<button onTap="showPolyline">Polyline</button>
<button onTap="showCircle">Circle</button>
</view>
</view>
</view>
pages/component/basic/map/index.js
const init = () => ({
latitude: 10.779693436530149,
longitude: 106.67971686137946,
markers: [],
polygon: [],
polyline: [],
zoom: 10,
circles: []
});
Page({
data: {
apiKey: 'YOUR_GOOGLE_MAP_API_KEY',
...init()
},
resetMap() {
this.setData({ ...init() });
},
onMarkerTap(event) {
console.log('onMarkerTap', event);
},
onTap(event) {
console.log('onTap', event);
},
showPolyline() {
this.setData({
zoom: 3,
latitude: 0,
longitude: -180,
polyline: [
{
strokeColor: '#FF0000',
strokeWidth: 2,
points: [
{ latitude: 37.772, longitude: -122.214 },
{ latitude: 21.291, longitude: -157.821 },
{ latitude: -18.142, longitude: 178.431 },
{ latitude: -27.467, longitude: 153.027 }
]
}
]
});
},
showPolygon() {
this.setData({
zoom: 5,
latitude: 24.886,
longitude: -70.268,
polygon: [
{
strokeColor: '#FF0000',
strokeWidth: 2,
fillColor: '#FF0000',
points: [
{ latitude: 25.774, longitude: -80.19 },
{ latitude: 18.466, longitude: -66.118 },
{ latitude: 32.321, longitude: -64.757 },
{ latitude: 25.774, longitude: -80.19 }
]
}
]
});
},
showCircle() {
const citymap = {
chicago: {
latitude: 41.878,
longitude: -87.629,
population: 2714856
},
newyork: {
latitude: 40.714,
longitude: -74.005,
population: 8405837
},
losangeles: {
latitude: 34.052,
longitude: -118.243,
population: 3857799
},
vancouver: {
latitude: 49.25,
longitude: -123.1,
population: 603502
}
};
this.setData({
zoom: 4,
latitude: 41.878,
longitude: -87.629,
circles: Object.keys(citymap).map((key) => ({
strokeColor: '#FF0000',
strokeWidth: 2,
fillColor: '#FF0000',
latitude: citymap[key].latitude,
longitude: citymap[key].longitude,
radius: Math.sqrt(citymap[key].population) * 100
}))
});
},
showMarker() {
this.setData({
zoom: 4,
latitude: -25.363,
longitude: 131.044,
markers: [
{
id: '1',
latitude: -25.363,
longitude: 131.044
}
]
});
}
});
pages/component/basic/map/index.tcss
.map {
height: calc(var(--tf-window-height) / 2);
}
.container {
min-height: 100%;
background-color: var(--gray20);
padding: 16px;
}
.block {
background-color: white;
margin: 8px 0;
padding: 16px;
border-radius: var(--border-radius-rounded-4px);
}
.actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 4px;
}