微信小程序--地图导览

---

前言

微信小程序,校园导览

---

一、整体框架,页面

二、主页面代码

index.wxml

代码如下（示例）：

<!-- 主页面,地图页面 -->

<view style="width: 100%;">

  <map longitude="{{longitude}}" style="width: 100%; height: 600px;" latitude="{{latitude}}"
    scale="{{buildlData[isSelectedBuildType].scale}}" markers="{{buildlData[isSelectedBuildType].data}}"
    bindmarkertap="markertap" label="{{buildlData[isSelectedBuildType].name}}" id="map"
    data-num="{{buildlData[isSelectedBuildType].data}}">


  </map>
<!-- cover-view 和scroll-view 不要放在地图组件的里面,否则真机调试时无法进行点击,图片也被覆盖了 -->
  <cover-view class="chatroom">
    <cover-image src="/img/留言板.png" bindtap="navitap" id="1"></cover-image>
  </cover-view>


  <!-- 定位的作用真机调试的时候可以体现出来 -->
  <cover-view class="img">
    <cover-image bindtap="dingwei" src="/img/location.png">
    </cover-image>
  </cover-view>

  <scroll-view scroll-y="true" scroll-into-view="focusPointId" class="top-swich">

    <view wx:for="{{buildlData}}" wx:key="id" id="{{index}}">
      <!-- style    的作用是用来进行点击变色的 -->
      <!-- data-num 的作用是在'changePage'中传递过去的参数num -->
      <view style="color:{{item.fId==currentItemId?'#e98f36':'#000'}}" data-num="{{item.fId}}" class="box"
        bindtap="changePage">
        <image ></image>
        <view >{{item.name}}</view>
      </view>
    </view>
  </scroll-view>
</view>

index.js

代码如下（示例）：

var map= [....]    //所有的地图信息都放到map数组里面了
Page({
  data: {
    //云开发数据
      avatarUrl: './user-unlogin.png',
      userInfo: {},
      logged: false,
      takeSession: false,
      requestResult: '',

    latitude: 36.726433,
    longitude: 101.749042,
    scale:15.4,
    buildlData: map,
    isSelectedBuild:0,
    isSelectedBuildType: 0,
    islocation: true,
    focusPointId:"",
    isChecked:true ,
    currentItemId:"1"
    
  },
  //获取用户信息
  onLoad: function() {
    if (!wx.cloud) {
      wx.redirectTo({
        url: '../chooseLib/chooseLib',
      })
      return
    }
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              this.setData({
                avatarUrl: res.userInfo.avatarUrl,
                userInfo: res.userInfo
              })
            }
          })
        }
        else{
          wx.navigateTo({
            url: '/pages/grant/grant',
          })
        }
      }
    })
  },
  onGetUserInfo: function(e) {
    if (!this.data.logged && e.detail.userInfo) {
      this.setData({
        logged: true,
        avatarUrl: e.detail.userInfo.avatarUrl,
        userInfo: e.detail.userInfo
      })
    }
  },
//调用云函数
  onGetOpenid: function() {
    // 调用云函数
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[云函数] [login] user openid: ', res.result.openid)
        app.globalData.openid = res.result.openid
       
      },
      fail: err => {
        console.error('[云函数] [login] 调用失败', err)
       
      }
    })
  },
//定位
  dingwei:function(){
    var that=this;
  wx.getLocation({
   type: 'gcj02',
   success: function(res) {
    that.setData({
     latitude:res.latitude,
     scale:16.4,
     longitude:res.longitude
    })
   //console.log(res.latitude)
   // console.log(res.longitude)
   }

  })
},
//展示标志点
  changePage: function (event) {
    
    this.setData({
      currentItemId:event.currentTarget.dataset.num,
      isSelectedBuildType: event.currentTarget.dataset.num-1,
      longitude:map[event.currentTarget.dataset.num-1].longitude,
      latitude:map[event.currentTarget.dataset.num-1].latitude,
      scale: 16,
    });
    
  },
//标记跳转
  markertap(res) {
   
  
    var mark=res.currentTarget.dataset.num;
    var markerId=res.detail.markerId;
    
    let temp=JSON.stringify(mark[markerId])//作用是把数组转变成可以在网页传递中的参数进行传递

        wx.navigateTo({
          url: "/pages/info/info?mar="+temp,
        })
    },
//聊天室跳转
  navitap:function(){
  
       wx.navigateTo({
      url: '/pages/chat/chat',
       })
      },
})

---

三、总结

1. 页面跳转传递参数,也可用来传递数组,采用JSON的一些用法
2. 地图上显示组件,不要在map里面写,在外面写,否则真机调试的时候被覆盖，写的时候要用cover－view，不要用view
3. 学到了新的动画，"波浪"样式具体在index.wxss中

源码放在了github上

https://github.com/copy-xu/vx-grade-map