Commit 8c69c621 authored by youjie's avatar youjie

地图优化

parent 7a7b8acd
...@@ -16,13 +16,11 @@ ...@@ -16,13 +16,11 @@
:longitude="center.longitude" :longitude="center.longitude"
:latitude="center.latitude" :latitude="center.latitude"
:include-points="includePoints.points"
--> -->
<map id="myMap" ref="myMapRef" style="width: 100%; height: 100%;" <map id="myMap" ref="myMapRef" style="width: 100%; height: 100%;"
:longitude="center.longitude" :longitude="center.longitude"
:latitude="center.latitude" :latitude="center.latitude"
:markers="markers" :markers="markers"
:scale="scale"
@callouttap="handleCalloutClick" @callouttap="handleCalloutClick"
> >
</map> </map>
...@@ -156,13 +154,11 @@ ...@@ -156,13 +154,11 @@
prevCurrent: null, prevCurrent: null,
current: 0, current: 0,
nextCurrent: null, nextCurrent: null,
padding: [20, 50, 20, 50], padding: [20, 20, 20, 20],
MapType: 0, MapType: 0,
includePoints: { includePoints: [],
points: [],
},
scale: 13, scale: 13,
mapData: {}, mapCtx: null,
}; };
}, },
components: { components: {
...@@ -202,43 +198,30 @@ ...@@ -202,43 +198,30 @@
}); });
},
mounted() {
// #ifdef MP-WEIXIN
this.initMiniProgramMap();
// #endif
}, },
methods: { methods: {
calculateBounds(markers) { initMiniProgramMap(){
if (markers.length === 0) return null; let that = this
const query = wx.createSelectorQuery().in(this);
let minLat = markers[0].lat; query.select('#myMap').fields({
let maxLat = markers[0].lat; node: true,
let minLng = markers[0].lng; size: true
let maxLng = markers[0].lng; }, (res) => {
that.mapCtx = wx.createMapContext('myMap');
markers.forEach(marker => { console.log(this.mapCtx,'--------地图实例')
minLat = Math.min(minLat, marker.lat); }).exec();
maxLat = Math.max(maxLat, marker.lat);
minLng = Math.min(minLng, marker.lng);
maxLng = Math.max(maxLng, marker.lng);
});
return {
southWest: this.mapData.LatLng(minLat, minLng),
northEast: this.mapData.LatLng(maxLat, maxLng)
};
}, },
adjustMapToFitMarkers(markers) { fitMapToBounds() {
const bounds = this.calculateBounds(markers); if (!this.mapCtx || this.includePoints.length === 0) return;
if (!bounds) return; this.mapCtx.includePoints({
points:this.includePoints,
// 创建 LatLngBounds 对象 padding: [20,40,20,40],
const latLngBounds = this.mapData.LatLngBounds( });
bounds.southWest,
bounds.northEast
);
// 调整地图视图
map.fitBounds(latLngBounds);
// 可选:添加动画效果
map.panToBounds(latLngBounds);
}, },
getItem(parameters,obj) { getItem(parameters,obj) {
this.searchObj = parameters this.searchObj = parameters
...@@ -259,16 +242,15 @@ ...@@ -259,16 +242,15 @@
this.current = i this.current = i
} }
} }
console.log(this.current,'----')
this.setNewMarkers() this.setNewMarkers()
}, },
setNewMarkers(){ setNewMarkers(){
for (let i = 0; i < this.markers.length; i++) { for (let i = 0; i < this.markers.length; i++) {
if(i==this.current){ if(i==this.current){
this.center = { // this.center = {
longitude: this.markers[i].longitude, // longitude: this.markers[i].longitude,
latitude: this.markers[i].latitude, // latitude: this.markers[i].latitude,
} // }
this.markers[this.current] ={ this.markers[this.current] ={
...this.markers[i], ...this.markers[i],
callout:{ callout:{
...@@ -289,14 +271,16 @@ ...@@ -289,14 +271,16 @@
this.$forceUpdate() this.$forceUpdate()
}, },
getLocation() { getLocation() {
let that = this
wx.getLocation({ wx.getLocation({
type: 'wgs84', // 精度模式 type: 'wgs84', // 精度模式
success: (res) => { success: (res) => {
that.fitMapToBounds();
// 更新地图中心点 // 更新地图中心点
if(this.$refs.map)this.$refs.map.moveToLocation({ // if(that.$refs.myMapRef)this.$refs.myMapRef.moveToLocation({
longitude: res.longitude, // longitude: res.longitude,
latitude: res.latitude // latitude: res.latitude
}); // });
}, },
fail: (err) => { fail: (err) => {
console.error('定位失败', err); console.error('定位失败', err);
...@@ -342,17 +326,17 @@ ...@@ -342,17 +326,17 @@
this.getList(); this.getList();
}, },
//获取列表数据 //获取列表数据
getList(type) { async getList(type) {
if(this.showLoading) return if(this.showLoading) return
this.showLoading = true this.showLoading = true
uni.showLoading({ title: "加载中" , mask: true}); uni.showLoading({ title: "加载中" , mask: true});
this.searchObj.QStars = this.tempRateAndPrice.rate.toString(); this.searchObj.QStars = this.tempRateAndPrice.rate.toString();
if (type == 1) { if (type == 1||this.searchObj.pageIndex==1) {
this.HotelList = []; this.HotelList = [];
this.markers = [] this.markers = []
this.includePoints.points = [] this.includePoints = []
} }
this.apipost( "dmc_post_B2BAndB2CGetDidaHotelPage", this.searchObj, await this.apipost( "dmc_post_B2BAndB2CGetDidaHotelPage", this.searchObj,
(res) => { (res) => {
uni.hideLoading() uni.hideLoading()
if (res.resultCode == 1) { if (res.resultCode == 1) {
...@@ -381,12 +365,12 @@ ...@@ -381,12 +365,12 @@
} }
); );
}, },
setMarkers(pageData){ async setMarkers(pageData){
if(pageData.length==0)return if(pageData.length==0)return
for (let i = 0; i < pageData.length; i++) { for (let i = 0; i < pageData.length; i++) {
this.includePoints.points.push({ this.includePoints.push({
latitude: pageData[i].latitude, latitude: pageData[i].latitude+ i * 0.00001,
longitude: pageData[i].longitude, longitude: pageData[i].longitude+ i * 0.00001,
}) })
let obj = JSON.parse(JSON.stringify(this.markersObj)) let obj = JSON.parse(JSON.stringify(this.markersObj))
obj = { obj = {
...@@ -403,29 +387,21 @@ ...@@ -403,29 +387,21 @@
if(i==0&&this.searchObj.pageIndex===1){ if(i==0&&this.searchObj.pageIndex===1){
obj.callout = { obj.callout = {
...obj.callout, ...obj.callout,
...this.editCallout1 ...this.editCallout1,
}
this.center = {
longitude: pageData[0].longitude,
latitude: pageData[0].latitude,
} }
// this.center = {
// longitude: pageData[0].longitude,
// latitude: pageData[0].latitude,
// }
} }
this.markers.push(obj) this.markers.push(obj)
} }
setTimeout(() => {
this.$nextTick(() => {
this.fitMapToBounds();
});
}, 500);
setTimeout(()=>{
let that = this
// const query = wx.createSelectorQuery().in(this);
// query.select('#myMap').fields({
// node: true,
// size: true
// }, (res) => {
// const mapContext = res.node.getMapContext();
// mapContext.moveToLocation();
// that.mapData = res.node.getMapContext()
// that.adjustMapToFitMarkers(that.markers)
// }).exec();
},300)
this.$forceUpdate() this.$forceUpdate()
} }
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment