地圖取 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,
}
})
}