suzhou-jichuang-lanhai
/
luyingxiaochengxu2
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地图

Browse Source
master
许宏杰 3 years ago
parent 125ed02020
commit 3ce00699ad
5 changed files with 186 additions and 23 deletions
Show Stats Download Patch File Download Diff File

179
pages/home/index.js
Unescape View File

@ -1,15 +1,22 @@
// pages/home/index.js
let app = getApp() //映入封装请求
const util = require('../../utils/uuid.js');
// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min');
var qqmapsdk;
//算坐标距离
const latAndLng = require('../../utils/lat.js')
Page({
/**
* 页面的初始数据
*/
data: {
locationed:false,
latitude: 32.061377,
longitude: 118.763563,
scale: 7,
ids:null,
option1: [{
text: '全省',
latitude: 32.061377,
@ -122,6 +129,7 @@ Page({
swiperList2:[],
maporList:'列表',
swiperIndex:0,
defaultMarker:0,
keyWord: '', //搜索框值
xiehuan: true, //列表——地图切换
cityShow: false, //显示城市框
@ -207,9 +215,13 @@ Page({
scale:9
})
},
//点击markers
clickMarkers(e){
let {ids} =this.data
if(ids == e.markerId ){
return
}
ids = e.markerId
let marker = this.data.markers
marker.forEach(item=>{
if(item.iconPath = 'http://www.jichuanglanhai.com/demo/js-yingdi/images/yingdi-bian.png'){
@ -218,8 +230,7 @@ Page({
item.height=15
}
})
let id = e.markerId
let index = marker.findIndex((item)=>item.id == id)
let index = marker.findIndex((item)=>item.id == ids)
marker[index].iconPath = 'http://www.jichuanglanhai.com/demo/js-yingdi/images/yingdi-bian.png'
marker[index].height = 50
marker[index].width =60
@ -227,6 +238,7 @@ Page({
swiperIndex:index,
markers:marker,
scale:9,
ids:ids
})
},
//请求江苏全部市的营地信息
@ -234,19 +246,20 @@ Page({
app.fetch(`9017/jsonData/jiangsu.json`, {}, false, 'GET').then(res => {
let marker = []
let swiperList = []
let ids
for (let key in res) {
res[key].forEach((item, index) => {
if (item.data == undefined) {
// console.log(key)
return
}
//轮播
swiperList.push({
city_code:item.data.camp.city_code,
name:item.data.camp.name,
images:item.data.camp.images[0],
is_collect:item.data.is_collect
})
//map图标
marker.push({
id: item.data.camp.id,
// name:item.data.camp.name,
@ -258,25 +271,51 @@ Page({
})
})
}
marker[44].iconPath = 'http://www.jichuanglanhai.com/demo/js-yingdi/images/yingdi-bian.png',
marker[44].width=60,
marker[44].height=50
//默认选中
let defaultMarker = res[this.data.cityactiveName]
let near =[]
defaultMarker.forEach(zuobiao=>{
let distance = latAndLng.getMapDistance(this.data.latitude,this.data.longitude,zuobiao.data.camp.latitude,zuobiao.data.camp.longitude);
near.push({
id:zuobiao.data.camp.id,
latitude:zuobiao.data.camp.latitude,
longitude:zuobiao.data.camp.longitude,
name:zuobiao.data.camp.name,
juli:distance
})
})
near.sort(function(a,b){
return a.juli - b.juli
})
defaultMarker = near[0]
defaultMarker = marker.findIndex(item=>item.id == defaultMarker.id)
console.log(defaultMarker,'默认')
ids= marker[defaultMarker].id
marker[defaultMarker].iconPath = 'http://www.jichuanglanhai.com/demo/js-yingdi/images/yingdi-bian.png',
marker[defaultMarker].width=60,
marker[defaultMarker].height=50
this.setData({
markers:marker,
markers2:marker,
markerRes:res,
swiperList:swiperList,
swiperList2:swiperList,
swiperIndex:44,
latitude: 32.394404,
longitude: 119.412834,
scale: 7,
swiperIndex:defaultMarker,
defaultMarker:defaultMarker,
ids:ids
})
})
},
//选中城市
cilckCity(e) {
if(this.data.locationed == false){
this.setData({
cityShow: false
})
this.getUserLocation()
return
}
if(this.data.xiehuan == false){
var header = this.selectComponent("#listpage")
header.gohome()
@ -340,9 +379,9 @@ Page({
item.height = 15
}
})
marker[44].iconPath = 'http://www.jichuanglanhai.com/demo/js-yingdi/images/yingdi-bian.png',
marker[44].width=60,
marker[44].height=50
marker[this.data.defaultMarker].iconPath = 'http://www.jichuanglanhai.com/demo/js-yingdi/images/yingdi-bian.png',
marker[this.data.defaultMarker].width=60,
marker[this.data.defaultMarker].height=50
swiperList=this.data.swiperList2
}else{
this.data.markerRes[e.currentTarget.dataset.item.text].forEach((item,index)=>{
@ -371,11 +410,11 @@ Page({
cityActive: e.currentTarget.dataset.index,
cityactiveName: e.currentTarget.dataset.item.text,
scale:e.currentTarget.dataset.item.text == '全省' ? 7 : 10,
swiperIndex:e.currentTarget.dataset.item.text == '全省' ? 44 : 0,
swiperIndex:e.currentTarget.dataset.item.text == '全省' ? this.data.defaultMarker : 0,
swiperList:swiperList,
})
// console.log(this.data.markers)
},
//选择城市
showCity() {
@ -433,7 +472,10 @@ Page({
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getJsYingdi()
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'CECBZ-55LCW-TSYR7-O4UGV-75DE7-2JBQH',
});
},
/**
@ -450,8 +492,107 @@ Page({
this.getTabBar().setData({
active: 0
})
this.getUserLocation()
},
// 获取权限
getUserLocation() {
let _this = this
wx.getSetting({
success: (res) => {
// 如果未授权
if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
wx.showModal({
title: '请求授权当前位置',
content: '需要获取您的地理位置，请确认授权',
success: (res) => {
if (res.cancel) {
//取消授权
wx.showToast({
title: '拒绝授权',
icon: 'none',
duration: 1000
})
} else if (res.confirm) {
//确定授权，通过wx.openSetting发起授权请求
wx.openSetting({
success: function (res) {
if (res.authSetting["scope.userLocation"] == true) {
wx.showToast({
title: '授权成功',
icon: 'success',
duration: 1000
})
//再次授权，调用wx.getLocation的API
_this.geo();
// console.log('再次授权')
} else {
wx.showToast({
title: '授权失败',
icon: 'none',
duration: 1000
})
}
}
})
}
},
})
} else if (res.authSetting['scope.userLocation'] == undefined) {
//用户首次进入页面
_this.geo();
// console.log('初次进入')
} else {
// console.log('授权成功')
//已授权
_this.geo();
}
},
})
},
// 获取定位城市
geo: function () {
var _this = this;
wx.getLocation({
type: 'gcj02',
isHighAccuracy: true, //开启高精度定位
success: function (res) {
let {
latitude,
longitude
} = res
//当前坐标-层级
_this.setData({
latitude:latitude,
longitude:longitude,
scale:10
})
// 调用腾讯地图api获取当前位置
qqmapsdk.reverseGeocoder({
sig: "BmvXO4wJDbVYKa7yrzuIY2wPuXKaxetj",
location: {
latitude: latitude,
longitude: longitude
},
success: function (res) {
let name = res.result.address_component.city
name =name.slice(0,name.length-1)//去掉市
let index = _this.data.option1.findIndex(item=>item.text == name)//索引
console.log(res,name,index,'腾讯')
_this.setData({
cityActive: index, //选中样式
cityactiveName: name, //选中值
locationed:true
})
_this.getJsYingdi()
},
fail: function (error) {
console.log('腾讯api调取失败：', error);
},
});
}
})
},
/**
* 生命周期函数--监听页面隐藏
*/

6
pages/info/index.wxml
Unescape View File

@ -75,10 +75,10 @@
<image src="http://www.jichuanglanhai.com/demo/js-yingdi/images/icon.png" mode="aspectFill"></image>
</view>
<view class="correlation-title-text">
营地预定
营地预订
</view>
</view>
<!-- 预定列表-->
<!-- 预订列表-->
<view class="yuding-list">
<view class="yuding-list-item">
<view class="list-item-image">
@ -96,7 +96,7 @@
<view class="item-moeny">
¥<text>118.00</text>
</view>
<view class="btn-text">预定</view>
<view class="btn-text">预订</view>
</view>
</view>

2
pages/info/index.wxss
Unescape View File

@ -222,7 +222,7 @@ swiper-item image{
font-style: italic;
color: #273329;
}
/* 预定列表 */
/* 预订列表 */
.yuding-list{
width: 100%;
background: #FFFFFF;

21
utils/lat.js
Unescape View File

@ -0,0 +1,21 @@
//进行经纬度转换为距离的计算
function Rad(d){
return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
}
/*
计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
默认单位km
*/
export function getMapDistance(lat1,lng1,lat2,lng2) {
var radLat1 = Rad(lat1);
var radLat2 = Rad(lat2);
var a = radLat1 - radLat2;
var b = Rad(lng1) - Rad(lng2);
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
s = s *6378.137 ;// EARTH_RADIUS;
s = Math.round(s * 10000) / 10000; //输出为公里
//s=s.toFixed(2);
return s;
}

1
utils/qqmap-wx-jssdk.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save