|
|
// pages/map/map.js
|
|
|
//腾讯地图SDK
|
|
|
var QQMapWX = require('../../libs/qqmap-wx-jssdk')
|
|
|
Page({
|
|
|
qqmapsdk: new QQMapWX ({
|
|
|
key: '2Y2BZ-ABTA7-5UMXN-HCB7R-XZIWO-FGB3C'
|
|
|
}),
|
|
|
/**
|
|
|
* 页面的初始数据
|
|
|
*/
|
|
|
data: {
|
|
|
mapw: '100%', //地图宽度
|
|
|
maph: '0',
|
|
|
scale: '18',
|
|
|
longitude: null,
|
|
|
latitude: null,
|
|
|
markers: null
|
|
|
},
|
|
|
markIndex: 0,
|
|
|
mapCtx: null,
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面加载
|
|
|
*/
|
|
|
onLoad: function() {
|
|
|
this.mapCtx = wx.createMapContext('map')
|
|
|
//获取窗口的宽度和高度
|
|
|
wx.getSystemInfo({
|
|
|
success: res => {
|
|
|
var mapw = res.windowWidth
|
|
|
var maph = res.windowHeight
|
|
|
this.setData({
|
|
|
maph: maph + 'px',
|
|
|
//设置控件显示
|
|
|
controle: [{
|
|
|
id: 1,
|
|
|
iconPath: '/images/banner.png',
|
|
|
position: {left: 0, top: 10, width: mapw, height: 74},
|
|
|
clickable: true
|
|
|
}, {
|
|
|
id: 2,
|
|
|
iconPath: '/images/gps.png',
|
|
|
position: {left: 10, top: maph-50, width: 40, height: 40},
|
|
|
clickable: true
|
|
|
}, {
|
|
|
id: 3,
|
|
|
iconPath: '/images/gift.png',
|
|
|
position: {left: mapw-60, top: maph-120, width: 40, height: 40},
|
|
|
clickable: true
|
|
|
}, {
|
|
|
id: 4,
|
|
|
iconPath: '/images/cost.png',
|
|
|
position: {left: mapw-60, top: maph-60, width: 40, height: 40},
|
|
|
clickable: true
|
|
|
}]
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
|
*/
|
|
|
|
|
|
//获取当前位置（经纬度）
|
|
|
onReady: function() {
|
|
|
wx.getLocation({
|
|
|
type: 'gcj02',
|
|
|
success: res => {
|
|
|
this.setData({
|
|
|
longitude: res.longitude,
|
|
|
latitude: res.latitude
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
getFood: function(longitude, latitude) {
|
|
|
//调用接口
|
|
|
this.qqmapsdk.search({
|
|
|
keyword: '餐厅',
|
|
|
location: {
|
|
|
longitude: longitude,
|
|
|
latiude: latitude
|
|
|
},
|
|
|
success: res => {
|
|
|
console.log(res.data)
|
|
|
var mark = []
|
|
|
//返回查找结果
|
|
|
for (let i in res.data) {
|
|
|
mark.push({
|
|
|
iconPath: '/images/food.png',
|
|
|
id: i,
|
|
|
latitude: res.data[i].location.lat,
|
|
|
longitude: res.data[i].location.lng
|
|
|
})
|
|
|
}
|
|
|
mark.push({
|
|
|
iconPath: '/images/center.png',
|
|
|
id: res.data.length,
|
|
|
latitude: latitude,
|
|
|
longitude: longitude
|
|
|
})
|
|
|
//将搜索结果显示在地图上
|
|
|
this.setData({
|
|
|
markers: mark
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
|
|
|
//单击控件，id=2返回中心位置，id=1跳转优惠券页面
|
|
|
bindControlTap: function(e) {
|
|
|
var id = e.controlId
|
|
|
if (id === 1) {
|
|
|
wx.navigateTo({
|
|
|
url: '/pages/coupon/coupon',
|
|
|
})
|
|
|
} else if (id === 2){
|
|
|
//将地图中心移动到当前定位
|
|
|
this.mapCtx.moveToLocation()
|
|
|
}
|
|
|
},
|
|
|
|
|
|
//事业变化获取中心点坐标
|
|
|
bindRegionChange: function(e) {
|
|
|
if (e.type === 'end') {
|
|
|
this.mapCtx.getCenterLocation({
|
|
|
success: res => {
|
|
|
this.getFood(res.longitude, res.latitude)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
