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>
相关推荐
故事与他6458 分钟前
XSS_and_Mysql_file靶场攻略
前端·学习方法·xss
ftpeak22 分钟前
JavaScript性能优化实战
开发语言·javascript·性能优化
莫的感情42 分钟前
下载按钮点击一次却下载两个文件问题
前端
一个很帅的帅哥1 小时前
JavaScript事件循环
开发语言·前端·javascript
小宁爱Python1 小时前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理
前端·django·sqlite
fox_1 小时前
深入理解React中的不可变性:原理、价值与实践
前端·react.js
Github项目推荐1 小时前
你的错误处理一团糟-是时候修复它了-🛠️
前端·后端
Code小翊1 小时前
C语言bsearch的使用
java·c语言·前端
云枫晖1 小时前
Webapck系列-初识Webpack
前端·javascript
慧一居士1 小时前
HTML5 功能介绍,使用场景,对应功能点完整使用示例
前端