uni-app地图标点展示

使用微信小程序框架编写的。它包含一个模板部分和一个脚本部分。

  1. 模板部分:

    • <template>: 这是微信小程序中用来定义页面结构的标签。
    • <view>: 微信小程序的基本组件,用来展示内容或布局。
    • <view class="page-body">: 定义了一个页面主体部分。
    • <view class="page-section page-section-gap">: 定义了一个页面部分,并给它添加了两个样式类,可能是用来控制样式和添加间距。
    • <map>: 微信小程序的地图组件,用来展示地图。
      • style="width: 100%; height: 800px;": 设置地图的宽度为100%且高度为800像素。
      • :latitude="latitude": 绑定地图的纬度为脚本中定义的latitude值。
      • :longitude="longitude": 绑定地图的经度为脚本中定义的longitude值。
      • :markers="covers": 绑定地图上的标记点为脚本中定义的covers数组。
  2. 脚本部分 (使用 <script setup> 语法):

    • const id = 0;: 定义一个常量id,值为0。
    • const title = 'map';: 定义一个常量title,值为'map'。
    • const latitude = 39.909;: 定义一个常量latitude,值为39.909,代表纬度。
    • const longitude = 116.39742;: 定义一个常量longitude,值为116.39742,代表经度。
    • const covers = [ ... ];: 定义一个常量数组covers,包含两个对象,每个对象代表地图上的一个标记点。每个对象都有id, latitude, longitude, width, 和 height属性。

总结:这段代码定义了一个微信小程序的页面结构,页面中有一个地图组件,地图的纬度和经度由脚本中的常量提供,并且地图上有两个标记点,这些标记点的信息也由脚本中的常量数组提供。

复制代码
<template>
  <view>
    <view class="page-body">
      <view class="page-section page-section-gap">
        <map style="width: 100%; height: 800px;" :latitude="latitude" :longitude="longitude" :markers="covers">
        </map>
      </view>
    </view>
  </view>
</template>
说明这段代码
<script setup>
const id = 0;
const title = 'map';
const latitude = 39.909;
const longitude = 116.39742;
const covers = [
  {
    id: 1,
    latitude: 39.909,
    longitude: 116.39742,
    width: 20,
    height: 30
  },
  {
    id: 2,
    latitude: 39.90,
    longitude: 116.39,
    width: 20,
    height: 30
  }
];
</script>
相关推荐
无双_Joney17 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥19 分钟前
前端必学的 CSS Grid 布局体系
前端·css
EMT19 分钟前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
ccnocare20 分钟前
选择文件夹路径
前端
艾小码20 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月21 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁25 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅25 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸26 分钟前
Prompt结构化输出:从入门到精通的系统指南
前端