Skip to main content

map

  • 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 Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Các thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị măc địnhBắt buộcMô tả
api-keystringKey của google maps. Tham khảo cách tạo key tại đây
latitudenumberVĩ độ trung tâm (center latitude) của map
longitudenumberKinh độ trung tâm (center longitude) của map
zoomnumber10Mức độ phóng to/ thu nhỏ
markersobjectMột marker để đánh dấu bản đồ. Tham khảo cấu hình bên dưới.
polygonobjectMột polygon (đa giác) để đánh dấu bản đồ. Xem chi tiết bên dưới.
polylineobjectMột polyline (đường đa tuyến) để đánh dấu bản đồ. Xem chi tiết bên dưới
circlesobjectMột circle (hình tròn) để đánh dấu bản đồ. Xem chi tiết bên dưới.
onMarkerTapeventSự kiện được kích hoạt khi touch vào marker. Thông tin trả về sẽ là Marker ID, latitudelongitude.
onTapeventSự kiện được gọi khi bấm vào map
onRegionChangeeventSự 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

Marker
Thuộc tínhKiểu dữ liệuBắt buộcMô tả
idnumberĐịnh danh duy nhất của marker.
latitudenumberVĩ độ trung tâm (center latitude) của marker
longitudenumberKinh độ trung tâm (center longitude) của marker
titlestringTiêu đề của marker
iconPathstringĐườ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.
widthnumberChiều rộng của marker
heightnumberChiều cao của marker
labelstring / objectNhã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 }
alphanumberĐộ 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

Polygon
Thuộc tínhKiểu dữ liệuBắt buộcMô tả
pointsArray of objectsChứa tọa độ (latitude và longitude) các đỉnh của đa giác
fillColorstringMàu nền của đa giác
strokeColorstringMàu viền của đa giác
strokeWidthstringĐộ dày của viền đa giác

Polyline

Polyline
Thuộc tínhKiểu dữ liệuBắt buộcMô tả
pointsArray of objectsChứa tọa độ (latitude và longitude) các điểm của polyline (đường đa tuyến)
strokeColorstringMàu viền của polyline
strokeWidthnumberĐộ dày của viền đa giác

Circle

Circle
Thuộc tínhKiểu dữ liệuBắt buộcMô tả
latitudenumberVĩ độ của tâm đường tròn
longitudenumberKinh độ của tâm đường tròn
radiusnumberBán kính đường tròn
fillColorstringMàu nền của đường tròn
strokeColorstringMàu viền của đường tròn
strokeWidthnumberĐộ 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;
}