<!--pages/map/map.wxml-->

<view class='main'>

<view class='search'>

<view class='bg'>

<image class='icon' src='/images/icon_search.png'></image>

<input bindinput="bindKeyInput" bindconfirm="search" class='input' placeholder='关键字/区域/商圈'></input>

</view>

<image class='nav' src='/images/nav_right_map.png' bindtap='goTo'></image>

</view>

<map id='myMap' class='map' longitude="{{map.longitude}}" latitude="{{map.latitude}}" markers="{{markers}}"  controls="{{controls}}" bindcontroltap="controltap" show-location include-points="{{includes}}" bindcallouttap="selectStore" bindmarkertap="selectStore" bindregionchange="getCenterLocation" scale='13' bindtap="includePoints" scale="18"></map>

<view class='store' bindtap='openDetail' data-id="{{detail.StoreId}}">

<view class='sw nowrap'>{{detail.StoreName}}</view>

<view class='seat sw nowrap'>{{detail.Address}}</view>

<view class='now' wx:if="{{detail.Distance}}"><image class='jl' src='/images/icon_juli.png'></image>距离当前位置{{detail.Distance}}</view>

<image class='left' src='/images/icon_left.png'></image>

</view>

<scroll-view class='scroll'  scroll-y>

<view class='list' wx:for="{{list}}" wx:key="{{item.RoomTypeId}}" bindtap='openRoom' data-id="{{item.RoomTypeId}}">

<image class='img' src="{{item.RoomTypeImage}}" mode="aspectFill"></image>

<view>

<view>{{item.RoomTypeName}}</view>

<view>￥{{item.Price}}起/月</view>

</view>

</view>

</scroll-view>

</view>

// pages/map/map.js

const app = getApp()

var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');

// 实例化API核心类

var qMap = new QQMapWX({

key: 'AOCBZ-UZFKF-FFVJR-JI5R3-PXP5J-I2F5K' // 必填

});

let w = 0;

let h = 0;

let Marr = [];

let Parr = [];

let isSF=true;

let data = {

"CommonParam": {

"Phone": "",

"CityName": "",

"PriceType": -1,

"PageSize": 5,

"PageIndex": 1

},

"Priority1SearchText": '',

"Priority3LongAndLati": {

"Longitude": 360,

"Latitude": 360,

"ForSearch": 1

}

}

Page({

/**

  * 页面的初始数据

  */

data: {

map: {

longitude: '',//中心经度

latitude: '',//中心纬度

},

markers: [],//坐标点

controls: [],//控件

includes: [],//包含点

detail: null,//门店详情

list: [],//房型列表

Data:null,

},

/**

  * 生命周期函数--监听页面加载

  */

onLoad: function (options) {

isSF = true

wx.getSystemInfo({

success: function (res) {

w = res.windowWidth

h = res.windowHeight

}

})

let that = this;

wx.getLocation({

type: 'gcj02',

success: function (res) {

let control = [{

id: 1,

iconPath: '/images/wz.png',

position: {

left: (w - 72) - 10,

top: (h * 0.45 - 25) - 15,

width: 72,

height: 25

},

clickable: true

}];

data.Priority3LongAndLati.Longitude = res.longitude

data.Priority3LongAndLati.Latitude = res.latitude

data.CommonParam.CityName = app.globalData.currentCity

// data.Priority3LongAndLati.Longitude = '121.389'

// data.Priority3LongAndLati.Latitude = '31.185'

that.search();

that.setData({

'map.longitude': res.longitude,

'map.latitude': res.latitude,

// 'map.longitude': '121.389',

// 'map.latitude': '31.185',

controls: control

})

}

})

// 使用 wx.createMapContext 获取 map 上下文

this.mapCtx = wx.createMapContext('myMap')

},

controltap(e) {

console.log(e.controlId)

let that = this;

if (e.controlId == 1) {

wx.getLocation({

type: 'gcj02',

success: function (res) {

that.setData({

'map.longitude': res.longitude,

'map.latitude': res.latitude,

})

}

})

}

},

includePoints: function () {

this.mapCtx.includePoints({

padding: [10],

points: [{

latitude: 23.10229,

longitude: 113.3345211,

}, {

latitude: 23.00229,

longitude: 113.3345211,

}]

})

},

goTo: (event) => {

wx.navigateBack({

url: event.currentTarget.dataset.url

})

},

search: function () {

let user = wx.getStorageSync('MFUser');

if (user) {

data.CommonParam.Phone = user.PhoneNumber

}

if (isSF){

wx.showLoading({

title: '加载中',

mask: true

})

}

let _this = this;

Marr=[]

Parr=[]

wx.request({

url: app.globalData.url.concat('/api/Search/SearchStore'),

method: 'POST',

data: data,

success: function (res) {

console.log(res.data)

data.Priority1SearchText=''

let d = res.data.Data;

if (d.length){

if(isSF){

_this.setData({

detail: d[0],

})

_this.getStoreList(d[0].StoreId)

}

_this.setData({

Data: res.data.Data

})

for (let i = 0; i < d.length; i++) {

let value = wx.getStorageSync(d[i].Lat + ',' + d[i].Lng)

if (value) {

_this.pushMarker(value.lat, value.lng, d, i);

} else {

_this.reverseLocation(d[i].Lat, d[i].Lng, d, i)

}

}

}

},

complete: function () {

wx.hideLoading();

isSF = false;

}

})

},

reverseLocation: function (lat, lng, data, i) {//百度坐标转腾讯地图坐标

var that = this;

// 调用接口

qMap.reverseGeocoder({

location: {

latitude: lat,

longitude: lng,

},

coord_type: 3,//baidu经纬度

success: function (res) {

var location = res.result.ad_info.location;

that.pushMarker(location.lat, location.lng, data, i);

wx.setStorage({

key: lat + ',' + lng,

data: {

lat: location.lat,

lng: location.lng

}

})

}

});

},

pushMarker: function (lat, lng, d, i) {

let _this = this;

let color ='#000'

if(isSF){

color = (i == 0) ? '#FF5B5B' : '#000'

}

//添加marker点

let m = {

iconPath: "/images/icon_sign_dizhi.png",

id: d[i].StoreId,

latitude: lat,

longitude: lng,

width: 19,

height: 19,

callout: {

content: d[i].StoreName + '\n￥' + d[i].StartPrice + '起/月',

fontSize: 12,

borderRadius: 8,

bgColor: "#ffffff",

color: color,

padding: 5,

display: 'ALWAYS'

}

}

Marr.push(m)

//添加包含点，缩放地图展示

let p = {

latitude: d[i].Lat,

longitude: d[i].Lng,

}

Parr.push(p)

if (isSF){

_this.setData({

includes: Parr

})

}

_this.setData({

markers: Marr,

})

},

//获取房型列表

getStoreList:function(id){

let _this=this;

wx.request({

url: app.globalData.url.concat('/api/StoreBrand/RoomTypes'),

method: 'POST',

data: {

"StoreId": id

},

success: function (res) {

_this.setData({

list:res.data.Data

})

}

})

},

selectStore:function(e){

for (let i in this.data.Data){

if (this.data.Data[i].StoreId == e.markerId){

this.setData({

detail: this.data.Data[i]

})

}

}

let m = this.data.markers

for (let i in m){

if (m[i].id == e.markerId){

m[i].callout.color ='#FF5B5B'

}else{

m[i].callout.color = '#000'

}

}

this.setData({

markers:m

})

this.getStoreList(e.markerId)

},

openDetail: (args) => {

wx.navigateTo({

url: '../storeDetail/storeDetail?id=' + args.currentTarget.dataset.id

})

},

openRoom:(args)=>{

wx.navigateTo({

url: '../RoomDetail/RoomDetail?RoomTypeId=' + args.currentTarget.dataset.id

})

},

bindKeyInput: function (e) {

data.Priority1SearchText = e.detail.value

},

onReady:function(){

wx.getSetting({

success: res => {

if (!res.authSetting['scope.userLocation']) {

wx.authorize({

scope: 'scope.userLocation',

success() {

}

})

}}

})

},

//显示门店信息

getCenterLocation: function (e) {

let _this = this;

if (e.type == 'begin') {

this.mapCtx.getCenterLocation({

success: function (res) {

data.Priority3LongAndLati.Longitude = res.longitude

data.Priority3LongAndLati.Latitude = res.latitude

_this.search();

}

})

}

}

})