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

前言

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

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
        }
      }
    ]
  }
});

效果图


总结

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

相关推荐
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun1 天前
小程序导航设置更多内容的实现方法
小程序
说私域1 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6681 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳1 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1211 天前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero1 天前
微信小程序41~50
微信小程序·小程序
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉2 天前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序