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

前言

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

1.校园地图页面

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

1. 校园地图(map 页面)

map.wxml

xml 复制代码
<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
css 复制代码
/* pages/map/map.wxss*/
.container {
  width: 100%;
  height: 100vh;
}

map.js

javascript 复制代码
// 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
        }
      }
    ]
  }
});

效果图


总结

今天的内容到此结束,下次我们要实现更高级的效果,记得关注我,带你去学习小程序!

相关推荐
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记13(微信小程序开发,缓存菜品,Spring Cache)
笔记·学习·微信小程序
郭邯6 小时前
小程序中自定义组件的样式隔离
微信小程序
每天开心9 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
老华带你飞14 小时前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽14 小时前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
说私域1 天前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往1 天前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw1 天前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
weixin_lynhgworld1 天前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序
996幸存者1 天前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app