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

【做一个微信小程序】校园地图页面实现

news 来源：原创 2025/5/23 5:43:17

前言

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

1.校园地图页面

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

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

`map.wxml`

<view class="container">
  <!-- 地图组件 -->
  <map
    id="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
        }
      }
    ]
  }
});