Nhảy tới nội dung

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 Studio

Demo​

Các thuộc tính​

Thuộc tínhKiểu dữ liệuGiá trị măc địnhBắt buộcMô tả
api-keystring✓Key của google maps. Tham khảo cách tạo key tại đây
latitudenumber✓Vĩ độ trung tâm (center latitude) của map
longitudenumber✓Kinh độ 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, latitude và longitude.
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.
latitudenumber✓Vĩ độ trung tâm (center latitude) của marker
longitudenumber✓Kinh độ 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 objects✓Chứ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ả
latitudenumber✓Vĩ độ của tâm đường tròn
longitudenumber✓Kinh độ của tâm đường tròn
radiusnumber✓Bá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;
}