|
作者：北辰，来自原文地址
相关文章：跳坑《一百零五》map组件，地图使用相关问题
根目录下 app.js, app.json, app.wxss解释
2.1 app.js 小程序的逻辑
2.2 app.json小程序的公共设置
2.3 app.wxss 小程序的公共样式表
在app.json 配置个tab ( 类似于iOS tabbar) { "pages":[ // 文件所在目录结构 // index.js logs.js setup.js "pages/index/index", "pages/logs/logs", "pages/setup/setup" ], // 整个的window "window":{ // 设置导航栏样式 "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "夏小天", "navigationBarTextStyle":"black" }, // tabbar对象 "tabBar": { "color": "#dddddd", "selectedColor": "#1296db", "borderStyle": "yellow", "backgroundColor": "#ffffff", // 这里是个 .js数组 "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "pages/images/icon3.png", "selectedIconPath": "pages/images/icon3.png" }, { "pagePath": "pages/logs/logs", "text": "搜索", "iconPath": "pages/images/icon1.png", "selectedIconPath": "pages/images/icon1.png" }, { "pagePath": "pages/setup/setup", "text": "设置", "iconPath": "pages/images/icon2.png", "selectedIconPath": "pages/images/icon2.png" }]}}
一个页面包含的文件结构包含四个文件 .js文件.json文件 .wxml文件 wuss文件(类似于想要布局出iOS中的一个界面需要view model controller 协同工作) .js文件 功能类似于 iOS中Controller的作用 起到协同的作用, 也就是页面的逻辑
.json 页面配置 比如我想要配置一下logs界面的导航栏文字
.wxml 页面结构 (也就是有view btn等控件)
.wxss 页面样式表(可以配置页面控件的位置, 颜色, 圆角等等属性)
接下来用地图控件写一个简单界面
.js 进行网络请求, 解析数据, 重新赋值data // 声明一个数组数组var dataArray = new Array()Page({ data: { // 标注的数组, 这个markers最终会在 .wxml中直接被使用, 初始为空, 后面会通过setData方法对他进行赋值. markers: [], // 地图上控件数组 controls: [{ // id号 方便找到是哪个控件 id: 2000, // 图片路径 iconPath: '/pages/images/tuijian.png', // 相对于地图的位置 position: { left: 375 - 120, top: 50, width: 100, height: 40 }, // 是否可以点击 clickable: true }] }, // header: {'content-type': 'application/json'} onLoad: function () { var that = this // 调用网络请求, 请求停车场数据 // list: [{ header: '今日热闻' }].concat(res.data.stories) // 进行一个网络请求 wx.request({ url: '', data: {}, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT header: { 'content-type': 'application/json' }, // 设置请求的 header success: function(res){ // success dataArray = res.data // 数据数组 var markers = new Array() for (var i = 0; i < dataArray.length; i ++) { var dic = dataArray[i] // console.log(dic.coordinateAmap) // 得到高德经纬度坐标点字符串 // 声明一个对象, 用于放置markers的一些参数, 就是iOS中类或者结构体 var info = { iconPath: "", id: 0, latitude: 31.237524, longitude: 121.5128895, width: 25, height: 25, name: "" }; info.id = i info.width = 25 info.height = 25 // 通过 , 号分割字符串 var arrLongLa = new Array() arrLongLa = dic.coordinateAmap.split(",") var longitude = arrLongLa[0] var latitude = arrLongLa[1] // 赋值相关信息 info.latitude = latitude info.longitude = longitude info.name = dic.address // 状态判断 if (dic.status == "空") { info.iconPath = "/pages/images/markers_icon3.png" }else if (dic.status == "忙") { info.iconPath = "/pages/images/markers_icon1.png" }else if (dic.status == "满") { info.iconPath = "/pages/images/markers_icon2.png" }else if (dic.status == "关") { }else { info.iconPath = "/pages/images/markers_icon5.png" } // 添加对象到数组 markers.push(info) } console.log(markers) // 执行setData, 对markers进行赋值, 之后在 .wxml中引用 that.setData( {markers: markers} ) }, fail: function() { // fail }, complete: function() { // complete } }) }, // 地图相关动作的几个方法 regionchange(e) { console.log(e.type) }, // markers的点击事件 markertap(e) { // 点击相应的坐标点取出相应的信息 console.log(dataArray[e.markerId]) console.log(e.markerId) }, // control的点击事件 controltap(e) { console.log(e.controlId) },})
.json文件页面配置 { "navigationBarTitleText": "logs"}
.wxml文件 页面UI <map id="map" longitude="121.5128895" latitude="31.237524" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 578px;"></map>
.wxss 配置位置
这篇没有使用这个文件, 因为基于地图操作 今天这篇大致 布局了一个如下如所示的界面
| 
收藏