当前位置：首页 > wzjs >正文

南沙免费网站建设杭州专业制作网站

wzjs 2025/9/19 10:31:54

南沙免费网站建设,杭州专业制作网站,wordpress做定制T恤的网站,什么网站出项目找人做前言上一个教程我们实现了小程序的一些的功能，有背景渐变色，发布功能有的呢，已支持图片上传功能，表情和投票功能开发中（请期待）。下面是一个更高级的微信小程序实现，包含以下功能：…

前言

上一个教程我们实现了小程序的一些的功能，有背景渐变色，发布功能有的呢，已支持图片上传功能，表情和投票功能开发中（请期待）。下面是一个更高级的微信小程序实现，包含以下功能：

1.校园地图页面

地图加载
已禁止缩放功能和拖动功能
可定位

1. 校园地图(`map` 页面)

`map.wxml`

<view class="container"><!-- 地图组件 --><mapid="school-map"latitude="{{latitude}}"longitude="{{longitude}}"markers="{{markers}}"style="width: 100%; height: 100vh;"enable-scroll="{{false}}"  enable-zoom="{{false}}"show-location></map>
</view>

`map.wxss`

/* pages/map/map.wxss*/
.container {width: 100%;height: 100vh;
}

`map.js`

// pages/school-map/school-map.js
Page({data: {latitude:(纬度),  // 第一中学的纬度longitude:（经度）, // 第一中学的经度markers: [{id: 1,latitude: (纬度),  // 标记点纬度longitude:（经度）, // 标记点经度name: '第一中学',iconPath: '/images/marker.png',  // 标记图标width: 30,height: 30,callout: {content: '第一中学',  // 点击标记点显示的信息color: '#ffffff',bgColor: '#007AFF',padding: 10,borderRadius: 10}}]}
});