雲開發地圖標記導航 雲開發一次性取所有數據

地圖取 elx 表格的經緯度數據,存到雲開發數據庫裏面,然後標記在地圖上,點擊地圖的標記可以實現路線規劃,導航,撥打電話。

elx數據格式如下:

雲開發的數據庫不能直接導入elx,所以需要轉換爲csv文件,轉換地址

 

看圖:

 

代碼:

// map.js
var markers = []; //地圖標記點
var callout = []; //地圖標記點的氣泡
var app = getApp()
Page({
  data: {
    marker_latitude: '',
    marker_longitude: '',
  },

  see(latitude,longitude,name,address) {
    console.log(latitude,longitude)
    latitude = Number(latitude)
    longitude = Number(longitude)
    wx.openLocation({
      latitude,
      longitude,
      name,address,
      scale: 14
    })
  },
  regionchange(e) {
    console.log('11111', e.type)
  },
  controltap(e) {
    console.log('3333', e.detail.controlId)
  },
  //選擇位置
  chooseLocation: function (e) {
    console.log(e)
    var that = this
    wx.chooseLocation({
      success: function (res) {
        console.log('reee',res)
        // success
        console.log(that.data.longitude, that.data.latitude, res.longitude, res.latitude)

        wx.openLocation({
          latitude:res.latitude,
          longitude:res.longitude,
          name:res.name,address:res.address,
          scale: 14
        })
        that.setData({
          // polyline: [{
          //   points: [{
          //     longitude: that.data.longitude,
          //     latitude: that.data.latitude
          //   }, {
          //     longitude: res.longitude,
          //     latitude: res.latitude
          //   }],
          //   color: "#FF0000DD",
          //   width: 2,
          //   dottedLine: true
          // }],
        })
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },
  markertap(e) {
    console.log('markertap', e.markerId)
    var that =this
    wx.showActionSheet({
      itemList: ['路線規劃導航', '撥打電話'],
      success(res) {
        console.log(res.tapIndex)
        if(res.tapIndex==0){
          that.see(that.data.markers[e.markerId].latitude,that.data.markers[e.markerId].longitude,that.data.listData[e.markerId].name,that.data.listData[e.markerId].locName)
        }else{
          var phoneNumber =String(that.data.listData[e.markerId].phone)
          console.log('that.data.listData[e.markerId].phone',phoneNumber)
          wx.makePhoneCall({
            phoneNumber: phoneNumber
          })
        }
      },
      fail(res) {
        console.log(res.errMsg)
      }
    })
  },
  onLoad() {
    var that = this;

    const DB = wx.cloud.database()

    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        that.setData({
          latitude: latitude,
          longitude: longitude
        })
      }
    })
    wx.cloud.callFunction({
      name: 'test', // 對應雲函數名
      data: {},
      success: res => {
        console.log('----', res.result.data)
        var listData = res.result.data;
        that.setData({
          listData,
          // latitude: listData[0].locNum.split(',')[0],
          // longitude: listData[0].locNum.split(',')[1]
        })
        for (var i = 0; i < listData.length; i++) {
          markers = markers.concat({
            iconPath: "../../images/loc.png",
            id: i,
            // callout: {
            //   content: listData[i].name,
            //   fontSize: '12',
            //   padding: true,
            //   color: '#444',
            //   display: 'ALWAYS',
            //   textAlign: 'center',
            //   borderRadius: 5
            // },
            latitude: listData[i].locNum.split(',')[0],
            longitude: listData[i].locNum.split(',')[1],
            width: 18,
            height: 20
          });
        }
        console.log(markers)
        that.setData({
          markers: markers
        })
      },
      fail: res => {
        console.log('----2', res)

      }
    })
  },
  onShow() {

  },
})
<!--pages/map/map.wxml-->

<!-- 103.995255,30.588652 -->
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location controls="{{controls}}" markers="{{markers}}" polyline="{{polyline}}" bindmarkertap="markertap" style="width: 100%; height: 100%;"></map>
<!-- <button class="btn1" catchtap="chooseLocation">查找位置</button> -->
<!-- <button class="btn2" catchtap="see">路線規劃導航</button> -->
/* pages/map/map.wxss */
page{
  height: 100%;
  width: 100%;
}
button{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
  text-align: center;
  background-color: aliceblue;
}

雲函數實現代碼:

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()
const MAX_LIMIT = 100
exports.main = async (event, context) => {
  // 先取出集合記錄總數
  const countResult = await db.collection('map').count()
  const total = countResult.total
  // 計算需分幾次取
  const batchTimes = Math.ceil(total / 100)
  // 承載所有讀操作的 promise 的數組
  const tasks = []
  for (let i = 0; i < batchTimes; i++) {
    const promise = db.collection('map').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get()
    tasks.push(promise)
  }
  // 等待所有
  return (await Promise.all(tasks)).reduce((acc, cur) => {
    return {
      data: acc.data.concat(cur.data),
      errMsg: acc.errMsg,
    }
  })
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章