uniapp map组件的基础与实践

养意

已于 2025-06-06 12:03:14 修改

阅读量1k

点赞数 13

CC 4.0 BY-SA版权

分类专栏：养意学前端文章标签：前端 javascript 开发语言 uniapp map

于 2025-06-06 12:02:22 首次发布

本文链接：https://blog.csdn.net/weixin_55493330/article/details/148472063

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