微信小程序地图开发入门(一)

如何获取AppID, 如何创建项目, 点击这里查看官网详情

根目录下 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 配置位置

这篇没有使用这个文件, 因为基于地图操作

今天这篇大致 布局了一个如下如所示的界面

Good! 工作流程不太明白的可以评论, 我能解答的 一定抽空回答!