提供邯郸企业建网站,网址怎么做快捷方式,wordpress 短信通知,清远 网站建设前言
上一个教程我们实现了小程序的一些的功能#xff0c;有背景渐变色#xff0c;发布功能有的呢#xff0c;已支持图片上传功能#xff0c;表情和投票功能开发中#xff08;请期待#xff09;。下面是一个更高级的微信小程序实现#xff0c;包含以下功能#xff1a;…前言
上一个教程我们实现了小程序的一些的功能有背景渐变色发布功能有的呢已支持图片上传功能表情和投票功能开发中请期待。下面是一个更高级的微信小程序实现包含以下功能
1.校园地图页面
地图加载已禁止缩放功能和拖动功能可定位
1. 校园地图(map 页面)
map.wxml
view classcontainer!-- 地图组件 --mapidschool-maplatitude{{latitude}}longitude{{longitude}}markers{{markers}}stylewidth: 100%; height: 100vh;enable-scroll{{false}} enable-zoom{{false}}show-location/map
/viewmap.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}}]}
});效果图 总结
今天的内容到此结束下次我们要实现更高级的效果记得关注我带你去学习小程序
