uniapp map组件的基础与实践

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);}