UniApp 中的 map
組件用于在應用中展示地圖,并且支持在地圖上添加標記、繪制線條和多邊形等功能。以下是一些基本用法:
1. 基本結構
首先,確保你在頁面的 .vue
文件中引入了 map
組件。以下是創建一個簡單地圖的基本代碼結構:
<template><view class="container"><map style="width: 100%; height: 300px;":latitude="latitude":longitude="longitude":markers="markers":polyline="polyline"@markertap="markertap"@callouttap="callouttap"@controltap="controltap"@regionchange="regionchange"></map></view>
</template><script>
export default {data() {return {latitude: 39.909, // 地圖中心緯度longitude: 116.39742, // 地圖中心經度markers: [{id: 0,latitude: 39.909,longitude: 116.39742,iconPath: '/static/images/marker.png', // 自定義圖標路徑width: 30, // 圖標寬度height: 45, // 圖標高度title: '這是一個標記點',callout: { // 標記點上方氣泡content: '北京',color: '#000',fontSize: 14,borderRadius: 15,bgColor: '#fff',display: 'ALWAYS'}}],polyline: [{points: [{latitude: 39.909,longitude: 116.39742,}, {latitude: 39.919,longitude: 116.40742,}],color: "#FF0000DD",width: 2,dottedLine: true}]}},methods: {markertap(e) {console.log('marker:', e.detail.markerId);}